@automattic/jetpack-ai-client 0.34.4 → 0.34.6
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.
- package/CHANGELOG.md +10 -0
- package/build/{ask-question → src/ask-question}/index.d.ts +1 -1
- package/build/{ask-question → src/ask-question}/index.js +1 -1
- package/build/{ask-question → src/ask-question}/sync.js +1 -1
- package/build/{audio-transcription → src/audio-transcription}/index.js +1 -1
- package/build/{components → src/components}/ai-control/ai-control.d.ts +1 -1
- package/build/{components → src/components}/ai-control/ai-control.js +4 -2
- package/build/{components → src/components}/ai-control/block-ai-control.d.ts +1 -1
- package/build/{components → src/components}/ai-control/block-ai-control.js +7 -4
- package/build/{components → src/components}/ai-control/extension-ai-control.d.ts +1 -1
- package/build/{components → src/components}/ai-control/extension-ai-control.js +6 -4
- package/build/src/components/ai-control/index.js +3 -0
- package/build/{components → src/components}/ai-feedback/index.d.ts +1 -1
- package/build/{components → src/components}/ai-feedback/index.js +4 -2
- package/build/src/components/ai-icon/index.js +17 -0
- package/build/{components → src/components}/ai-image/components/ai-image-modal.d.ts +1 -1
- package/build/{components → src/components}/ai-image/components/ai-image-modal.js +14 -9
- package/build/{components → src/components}/ai-image/components/carrousel.d.ts +1 -1
- package/build/{components → src/components}/ai-image/components/carrousel.js +15 -7
- package/build/{components → src/components}/ai-image/components/usage-counter.js +3 -1
- package/build/{components → src/components}/ai-image/featured-image.d.ts +1 -1
- package/build/{components → src/components}/ai-image/featured-image.js +13 -10
- package/build/{components → src/components}/ai-image/general-purpose-image.d.ts +1 -1
- package/build/{components → src/components}/ai-image/general-purpose-image.js +7 -7
- package/build/{components → src/components}/ai-image/hooks/use-ai-image.d.ts +2 -2
- package/build/{components → src/components}/ai-image/hooks/use-ai-image.js +5 -5
- package/build/{components → src/components}/ai-image/index.js +3 -3
- package/build/{components → src/components}/ai-modal-footer/index.d.ts +1 -1
- package/build/src/components/ai-modal-footer/index.js +31 -0
- package/build/{components → src/components}/audio-duration-display/index.d.ts +1 -1
- package/build/{components → src/components}/audio-duration-display/index.js +1 -1
- package/build/src/components/index.js +10 -0
- package/build/{components → src/components}/message/index.d.ts +4 -4
- package/build/{components → src/components}/message/index.js +12 -7
- package/build/{components → src/components}/modal/index.d.ts +1 -1
- package/build/{components → src/components}/modal/index.js +8 -3
- package/build/{components → src/components}/quota-exceeded-message/index.js +3 -3
- package/build/{data-flow → src/data-flow}/context.d.ts +1 -1
- package/build/src/data-flow/index.js +3 -0
- package/build/{data-flow → src/data-flow}/use-ai-context.d.ts +1 -1
- package/build/{data-flow → src/data-flow}/use-ai-context.js +2 -2
- package/build/{data-flow → src/data-flow}/with-ai-assistant-data.js +2 -2
- package/build/{hooks → src/hooks}/use-ai-checkout/index.js +1 -1
- package/build/{hooks → src/hooks}/use-ai-feature/index.d.ts +8 -8
- package/build/{hooks → src/hooks}/use-ai-suggestions/index.d.ts +1 -1
- package/build/{hooks → src/hooks}/use-ai-suggestions/index.js +2 -2
- package/build/{hooks → src/hooks}/use-audio-transcription/index.d.ts +1 -1
- package/build/{hooks → src/hooks}/use-audio-transcription/index.js +1 -1
- package/build/{hooks → src/hooks}/use-image-generator/index.d.ts +1 -1
- package/build/{hooks → src/hooks}/use-image-generator/index.js +3 -3
- package/build/{hooks → src/hooks}/use-media-recording/index.d.ts +1 -1
- package/build/{hooks → src/hooks}/use-post-content.js +1 -1
- package/build/{hooks → src/hooks}/use-transcription-post-processing/index.d.ts +1 -1
- package/build/{hooks → src/hooks}/use-transcription-post-processing/index.js +1 -1
- package/build/src/icons/ai-assistant.js +9 -0
- package/build/src/icons/error-exclamation.js +9 -0
- package/build/src/icons/index.js +7 -0
- package/build/src/icons/mic.js +9 -0
- package/build/src/icons/origami-plane.js +9 -0
- package/build/src/icons/player-pause.js +9 -0
- package/build/src/icons/player-play.js +9 -0
- package/build/src/icons/player-stop.js +9 -0
- package/build/src/icons/speak-tone.js +9 -0
- package/build/src/index.js +49 -0
- package/build/{jwt → src/jwt}/index.d.ts +1 -1
- package/build/{jwt → src/jwt}/index.js +1 -1
- package/build/{libs → src/libs}/get-all-blocks.d.ts +1 -1
- package/build/src/libs/index.js +6 -0
- package/build/{libs → src/libs}/map-action-to-human-text.js +1 -1
- package/build/{libs → src/libs}/markdown/html-to-markdown.d.ts +1 -1
- package/build/{libs → src/libs}/markdown/index.js +2 -2
- package/build/{libs → src/libs}/markdown/markdown-to-html.d.ts +1 -1
- package/build/src/logo-generator/assets/icons/ai.js +10 -0
- package/build/src/logo-generator/assets/icons/media.js +10 -0
- package/build/{logo-generator → src/logo-generator}/components/fair-usage-notice.js +1 -1
- package/build/src/logo-generator/components/feature-fetch-failure-screen.js +14 -0
- package/build/{logo-generator → src/logo-generator}/components/first-load-screen.js +4 -2
- package/build/{logo-generator → src/logo-generator}/components/generator-modal.js +20 -16
- package/build/{logo-generator → src/logo-generator}/components/history-carousel.js +2 -2
- package/build/{logo-generator → src/logo-generator}/components/logo-presenter.js +42 -19
- package/build/{logo-generator → src/logo-generator}/components/prompt.js +24 -13
- package/build/{logo-generator → src/logo-generator}/components/upgrade-nudge.js +8 -4
- package/build/{logo-generator → src/logo-generator}/components/upgrade-screen.js +11 -3
- package/build/src/logo-generator/components/visit-site-banner.js +22 -0
- package/build/{logo-generator → src/logo-generator}/hooks/use-checkout.js +1 -1
- package/build/{logo-generator → src/logo-generator}/hooks/use-fair-usage-notice-message.js +1 -1
- package/build/{logo-generator → src/logo-generator}/hooks/use-logo-generator.d.ts +5 -5
- package/build/{logo-generator → src/logo-generator}/hooks/use-logo-generator.js +9 -9
- package/build/{logo-generator → src/logo-generator}/hooks/use-request-errors.js +1 -1
- package/build/src/logo-generator/index.js +2 -0
- package/build/{logo-generator → src/logo-generator}/lib/logo-storage.d.ts +1 -1
- package/build/{logo-generator → src/logo-generator}/lib/logo-storage.js +1 -1
- package/build/{logo-generator → src/logo-generator}/lib/media-exists.js +1 -1
- package/build/{logo-generator → src/logo-generator}/lib/set-site-logo.js +1 -1
- package/build/{logo-generator → src/logo-generator}/lib/wpcom-limited-request.js +1 -1
- package/build/{logo-generator → src/logo-generator}/store/actions.js +3 -3
- package/build/{logo-generator → src/logo-generator}/store/index.js +3 -3
- package/build/{logo-generator → src/logo-generator}/store/initial-state.js +1 -1
- package/build/{logo-generator → src/logo-generator}/store/reducer.d.ts +94 -94
- package/build/{logo-generator → src/logo-generator}/store/reducer.js +3 -3
- package/build/{logo-generator → src/logo-generator}/store/selectors.d.ts +3 -3
- package/build/{logo-generator → src/logo-generator}/store/selectors.js +1 -1
- package/build/{suggestions-event-source → src/suggestions-event-source}/index.d.ts +1 -1
- package/build/{suggestions-event-source → src/suggestions-event-source}/index.js +4 -4
- package/build/{types.js → src/types.js} +1 -1
- package/package.json +10 -10
- package/build/components/ai-control/index.js +0 -3
- package/build/components/ai-icon/index.js +0 -13
- package/build/components/ai-modal-footer/index.js +0 -27
- package/build/components/index.js +0 -10
- package/build/data-flow/index.js +0 -3
- package/build/icons/ai-assistant.js +0 -7
- package/build/icons/error-exclamation.js +0 -7
- package/build/icons/index.js +0 -7
- package/build/icons/mic.js +0 -7
- package/build/icons/origami-plane.js +0 -7
- package/build/icons/player-pause.js +0 -7
- package/build/icons/player-play.js +0 -7
- package/build/icons/player-stop.js +0 -7
- package/build/icons/speak-tone.js +0 -7
- package/build/index.js +0 -49
- package/build/libs/index.js +0 -6
- package/build/logo-generator/assets/icons/ai.js +0 -8
- package/build/logo-generator/assets/icons/media.js +0 -8
- package/build/logo-generator/components/feature-fetch-failure-screen.js +0 -11
- package/build/logo-generator/components/visit-site-banner.js +0 -16
- package/build/logo-generator/index.js +0 -2
- package/build/{api-fetch → src/api-fetch}/index.d.ts +0 -0
- package/build/{api-fetch → src/api-fetch}/index.js +0 -0
- package/build/{ask-question → src/ask-question}/sync.d.ts +0 -0
- package/build/{audio-transcription → src/audio-transcription}/index.d.ts +0 -0
- package/build/{components → src/components}/ai-control/index.d.ts +0 -0
- package/build/{components → src/components}/ai-icon/index.d.ts +0 -0
- package/build/{components → src/components}/ai-image/components/usage-counter.d.ts +0 -0
- package/build/{components → src/components}/ai-image/hooks/use-site-type.d.ts +0 -0
- package/build/{components → src/components}/ai-image/hooks/use-site-type.js +0 -0
- package/build/{components → src/components}/ai-image/index.d.ts +0 -0
- package/build/{components → src/components}/ai-image/types.d.ts +0 -0
- package/build/{components → src/components}/ai-image/types.js +0 -0
- package/build/{components → src/components}/ai-status-indicator/index.d.ts +0 -0
- package/build/{components → src/components}/ai-status-indicator/index.js +0 -0
- package/build/{components → src/components}/audio-duration-display/lib/media.d.ts +0 -0
- package/build/{components → src/components}/audio-duration-display/lib/media.js +0 -0
- package/build/{components → src/components}/index.d.ts +0 -0
- package/build/{components → src/components}/quota-exceeded-message/index.d.ts +0 -0
- package/build/{components → src/components}/quota-exceeded-message/light-nudge.d.ts +2 -2
- /package/build/{components → src/components}/quota-exceeded-message/light-nudge.js +0 -0
- /package/build/{constants.d.ts → src/constants.d.ts} +0 -0
- /package/build/{constants.js → src/constants.js} +0 -0
- /package/build/{data-flow → src/data-flow}/context.js +0 -0
- /package/build/{data-flow → src/data-flow}/index.d.ts +0 -0
- /package/build/{data-flow → src/data-flow}/with-ai-assistant-data.d.ts +0 -0
- /package/build/{hooks → src/hooks}/use-ai-checkout/index.d.ts +0 -0
- /package/build/{hooks → src/hooks}/use-ai-feature/index.js +0 -0
- /package/build/{hooks → src/hooks}/use-audio-validation/index.d.ts +0 -0
- /package/build/{hooks → src/hooks}/use-audio-validation/index.js +0 -0
- /package/build/{hooks → src/hooks}/use-image-generator/constants.d.ts +0 -0
- /package/build/{hooks → src/hooks}/use-image-generator/constants.js +0 -0
- /package/build/{hooks → src/hooks}/use-media-recording/index.js +0 -0
- /package/build/{hooks → src/hooks}/use-post-content.d.ts +0 -0
- /package/build/{hooks → src/hooks}/use-save-to-media-library/index.d.ts +0 -0
- /package/build/{hooks → src/hooks}/use-save-to-media-library/index.js +0 -0
- /package/build/{hooks → src/hooks}/use-save-to-media-library.d.ts +0 -0
- /package/build/{hooks → src/hooks}/use-save-to-media-library.js +0 -0
- /package/build/{icons → src/icons}/ai-assistant.d.ts +0 -0
- /package/build/{icons → src/icons}/error-exclamation.d.ts +0 -0
- /package/build/{icons → src/icons}/index.d.ts +0 -0
- /package/build/{icons → src/icons}/mic.d.ts +0 -0
- /package/build/{icons → src/icons}/origami-plane.d.ts +0 -0
- /package/build/{icons → src/icons}/player-pause.d.ts +0 -0
- /package/build/{icons → src/icons}/player-play.d.ts +0 -0
- /package/build/{icons → src/icons}/player-stop.d.ts +0 -0
- /package/build/{icons → src/icons}/speak-tone.d.ts +0 -0
- /package/build/{index.d.ts → src/index.d.ts} +0 -0
- /package/build/{libs → src/libs}/get-all-blocks.js +0 -0
- /package/build/{libs → src/libs}/get-base64-image.d.ts +0 -0
- /package/build/{libs → src/libs}/get-base64-image.js +0 -0
- /package/build/{libs → src/libs}/index.d.ts +0 -0
- /package/build/{libs → src/libs}/map-action-to-human-text.d.ts +0 -0
- /package/build/{libs → src/libs}/markdown/html-to-markdown.js +0 -0
- /package/build/{libs → src/libs}/markdown/index.d.ts +0 -0
- /package/build/{libs → src/libs}/markdown/markdown-to-html.js +0 -0
- /package/build/{libs → src/libs}/open-block-sidebar.d.ts +0 -0
- /package/build/{libs → src/libs}/open-block-sidebar.js +0 -0
- /package/build/{libs → src/libs}/show-ai-assistant-section.d.ts +0 -0
- /package/build/{libs → src/libs}/show-ai-assistant-section.js +0 -0
- /package/build/{logo-generator → src/logo-generator}/assets/icons/ai.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/assets/icons/check.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/assets/icons/check.js +0 -0
- /package/build/{logo-generator → src/logo-generator}/assets/icons/logo.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/assets/icons/logo.js +0 -0
- /package/build/{logo-generator → src/logo-generator}/assets/icons/media.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/fair-usage-notice.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/feature-fetch-failure-screen.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/first-load-screen.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/generator-modal.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/history-carousel.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/image-loader.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/image-loader.js +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/logo-presenter.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/prompt.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/upgrade-nudge.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/upgrade-screen.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/components/visit-site-banner.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/constants.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/constants.js +0 -0
- /package/build/{logo-generator → src/logo-generator}/hooks/use-checkout.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/hooks/use-fair-usage-notice-message.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/hooks/use-request-errors.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/index.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/lib/media-exists.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/lib/set-site-logo.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/lib/wpcom-limited-request.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/store/actions.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/store/constants.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/store/constants.js +0 -0
- /package/build/{logo-generator → src/logo-generator}/store/index.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/store/initial-state.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/store/types.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/store/types.js +0 -0
- /package/build/{logo-generator → src/logo-generator}/types.d.ts +0 -0
- /package/build/{logo-generator → src/logo-generator}/types.js +0 -0
- /package/build/{types.d.ts → src/types.d.ts} +0 -0
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.34.6] - 2026-03-09
|
|
9
|
+
### Changed
|
|
10
|
+
- Switch to Native TypeScript compiler based on Go. [#47375]
|
|
11
|
+
|
|
12
|
+
## [0.34.5] - 2026-03-02
|
|
13
|
+
### Changed
|
|
14
|
+
- Update dependencies. [#46758]
|
|
15
|
+
|
|
8
16
|
## [0.34.4] - 2026-02-26
|
|
9
17
|
### Changed
|
|
10
18
|
- Update package dependencies. [#47285] [#47300] [#47309]
|
|
@@ -817,6 +825,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
|
|
817
825
|
- AI Client: stop using smart document visibility handling on the fetchEventSource library, so it does not restart the completion when changing tabs. [#32004]
|
|
818
826
|
- Updated package dependencies. [#31468] [#31659] [#31785]
|
|
819
827
|
|
|
828
|
+
[0.34.6]: https://github.com/Automattic/jetpack-ai-client/compare/v0.34.5...v0.34.6
|
|
829
|
+
[0.34.5]: https://github.com/Automattic/jetpack-ai-client/compare/v0.34.4...v0.34.5
|
|
820
830
|
[0.34.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.34.3...v0.34.4
|
|
821
831
|
[0.34.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.34.2...v0.34.3
|
|
822
832
|
[0.34.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.34.1...v0.34.2
|
|
@@ -36,4 +36,4 @@ export type AskQuestionOptionsArgProps = {
|
|
|
36
36
|
* // handle suggestionsEventSource
|
|
37
37
|
* } );
|
|
38
38
|
*/
|
|
39
|
-
export default function askQuestion(question: PromptProp, { postId, fromCache, feature, functions, model, languageCode
|
|
39
|
+
export default function askQuestion(question: PromptProp, { postId, fromCache, feature, functions, model, languageCode }?: AskQuestionOptionsArgProps): Promise<SuggestionsEventSource>;
|
|
@@ -6,7 +6,7 @@ import debugFactory from 'debug';
|
|
|
6
6
|
/**
|
|
7
7
|
* Internal dependencies
|
|
8
8
|
*/
|
|
9
|
-
import SuggestionsEventSource from
|
|
9
|
+
import SuggestionsEventSource from '../suggestions-event-source/index.js';
|
|
10
10
|
const debug = debugFactory('jetpack-ai-client:ask-question');
|
|
11
11
|
/**
|
|
12
12
|
* An asynchronous function that asks a question
|
|
@@ -6,7 +6,7 @@ import debugFactory from 'debug';
|
|
|
6
6
|
/**
|
|
7
7
|
* Internal dependencies
|
|
8
8
|
*/
|
|
9
|
-
import requestJwt from
|
|
9
|
+
import requestJwt from '../jwt/index.js';
|
|
10
10
|
const debug = debugFactory('jetpack-ai-client:ask-question-sync');
|
|
11
11
|
/**
|
|
12
12
|
* A function that asks a question without streaming.
|
|
@@ -5,7 +5,7 @@ import debugFactory from 'debug';
|
|
|
5
5
|
/**
|
|
6
6
|
* Internal dependencies
|
|
7
7
|
*/
|
|
8
|
-
import requestJwt from
|
|
8
|
+
import requestJwt from '../jwt/index.js';
|
|
9
9
|
const debug = debugFactory('jetpack-ai-client:audio-transcription');
|
|
10
10
|
/**
|
|
11
11
|
* A function that takes an audio blob and transcribes it.
|
|
@@ -29,5 +29,5 @@ type AIControlProps = {
|
|
|
29
29
|
* @param {AIControlProps} props - Component props
|
|
30
30
|
* @return {ReactElement} Rendered component
|
|
31
31
|
*/
|
|
32
|
-
export default function AIControl({ className, disabled, value, placeholder, isTransparent, state, onChange, banner, error, actions, message, promptUserInputRef, wrapperRef
|
|
32
|
+
export default function AIControl({ className, disabled, value, placeholder, isTransparent, state, onChange, banner, error, actions, message, promptUserInputRef, wrapperRef }: AIControlProps): ReactElement;
|
|
33
33
|
export {};
|
|
@@ -7,7 +7,7 @@ import clsx from 'clsx';
|
|
|
7
7
|
/**
|
|
8
8
|
* Internal dependencies
|
|
9
9
|
*/
|
|
10
|
-
import AiStatusIndicator from
|
|
10
|
+
import AiStatusIndicator from '../ai-status-indicator/index.js';
|
|
11
11
|
import './style.scss';
|
|
12
12
|
/**
|
|
13
13
|
* Base AIControl component. Contains the main structure of the control component and slots for banner, error, actions and message.
|
|
@@ -18,5 +18,7 @@ import './style.scss';
|
|
|
18
18
|
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, }) {
|
|
19
19
|
return (_jsxs("div", { className: clsx('jetpack-components-ai-control__container-wrapper', className), ref: wrapperRef, children: [error, _jsxs("div", { className: "jetpack-components-ai-control__container", children: [banner, _jsxs("div", { className: clsx('jetpack-components-ai-control__wrapper', {
|
|
20
20
|
'is-transparent': isTransparent,
|
|
21
|
-
}), children: [
|
|
21
|
+
}), children: [
|
|
22
|
+
_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] })
|
|
23
|
+
] }));
|
|
22
24
|
}
|
|
@@ -32,6 +32,6 @@ type BlockAIControlProps = {
|
|
|
32
32
|
* @param {MutableRefObject} ref - Ref to the component
|
|
33
33
|
* @return {ReactElement} Rendered component
|
|
34
34
|
*/
|
|
35
|
-
export declare function BlockAIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, banner, error, lastAction
|
|
35
|
+
export declare function BlockAIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, banner, error, lastAction }: BlockAIControlProps, ref: MutableRefObject<HTMLInputElement>): ReactElement;
|
|
36
36
|
declare const _default: import("react").ForwardRefExoticComponent<BlockAIControlProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
37
37
|
export default _default;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
* External dependencies
|
|
4
4
|
*/
|
|
@@ -12,8 +12,8 @@ import { forwardRef } from 'react';
|
|
|
12
12
|
/**
|
|
13
13
|
* Internal dependencies
|
|
14
14
|
*/
|
|
15
|
-
import { GuidelineMessage } from
|
|
16
|
-
import AIControl from
|
|
15
|
+
import { GuidelineMessage } from '../message/index.js';
|
|
16
|
+
import AIControl from './ai-control.js';
|
|
17
17
|
import './style.scss';
|
|
18
18
|
const debug = debugFactory('jetpack-ai-client:block-ai-control');
|
|
19
19
|
/**
|
|
@@ -75,7 +75,10 @@ export function BlockAIControl({ disabled = false, value = '', placeholder = '',
|
|
|
75
75
|
}, {
|
|
76
76
|
target: promptUserInputRef,
|
|
77
77
|
});
|
|
78
|
-
const actions = (_jsxs(_Fragment, { children: [(!showAccept || editRequest) && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: !loading ? (_jsxs(_Fragment, { children: [editRequest && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: cancelEdit, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), showRemove && !editRequest && !value?.length && onDiscard && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: discardHandler, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), value?.length > 0 && (_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 })) }))] })) : (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onStop, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Stop', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })) })), showAccept && !editRequest && (_jsxs("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: [(value?.length > 0 || lastValue === null) && (_jsxs(Flex, { gap: 1, role: "group", className: "jetpack-components-ai-control__button-group", children: [
|
|
78
|
+
const actions = (_jsxs(_Fragment, { children: [(!showAccept || editRequest) && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: !loading ? (_jsxs(_Fragment, { children: [editRequest && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: cancelEdit, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), showRemove && !editRequest && !value?.length && onDiscard && (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: discardHandler, variant: "secondary", label: __('Cancel', 'jetpack-ai-client'), children: showButtonLabels ? (__('Cancel', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })), value?.length > 0 && (_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 })) }))] })) : (_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onStop, variant: "secondary", label: __('Stop request', 'jetpack-ai-client'), children: showButtonLabels ? (__('Stop', 'jetpack-ai-client')) : (_jsx(Icon, { icon: closeSmall })) })) })), showAccept && !editRequest && (_jsxs("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: [(value?.length > 0 || lastValue === null) && (_jsxs(Flex, { gap: 1, role: "group", className: "jetpack-components-ai-control__button-group", children: [
|
|
79
|
+
_jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Discard', 'jetpack-ai-client'), onClick: discardHandler, tooltipPosition: "top", children: _jsx(Icon, { icon: trash }) }), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", label: __('Regenerate', 'jetpack-ai-client'), onClick: () => onSend?.(value), tooltipPosition: "top", disabled: !value?.length || value === null || disabled, children: _jsx(Icon, { icon: regenerate }) })
|
|
80
|
+
] })), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onAccept, variant: "primary", label: acceptLabel, children: showButtonLabels ? acceptLabel : _jsx(Icon, { icon: check }) })
|
|
81
|
+
] }))] }));
|
|
79
82
|
const message = showGuideLine &&
|
|
80
83
|
!loading &&
|
|
81
84
|
!editRequest &&
|
|
@@ -36,6 +36,6 @@ type ExtensionAIControlProps = {
|
|
|
36
36
|
* @param {MutableRefObject} ref - Ref to the component
|
|
37
37
|
* @return {ReactElement} Rendered component
|
|
38
38
|
*/
|
|
39
|
-
export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, showFairUsageMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, lastAction, blockType
|
|
39
|
+
export declare function ExtensionAIControl({ className, disabled, value, placeholder, showButtonLabels, isTransparent, state, showGuideLine, error, requestsRemaining, showUpgradeMessage, showFairUsageMessage, upgradeUrl, wrapperRef, onChange, onSend, onStop, onClose, onUndo, onUpgrade, onTryAgain, lastAction, blockType }: ExtensionAIControlProps, ref: MutableRefObject<HTMLInputElement>): ReactElement;
|
|
40
40
|
declare const _default: import("react").ForwardRefExoticComponent<ExtensionAIControlProps & import("react").RefAttributes<HTMLInputElement>>;
|
|
41
41
|
export default _default;
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
/**
|
|
3
3
|
* External dependencies
|
|
4
4
|
*/
|
|
@@ -11,8 +11,8 @@ import { forwardRef } from 'react';
|
|
|
11
11
|
/**
|
|
12
12
|
* Internal dependencies
|
|
13
13
|
*/
|
|
14
|
-
import { GuidelineMessage, ErrorMessage, UpgradeMessage, FairUsageLimitMessage, } from
|
|
15
|
-
import AIControl from
|
|
14
|
+
import { GuidelineMessage, ErrorMessage, UpgradeMessage, FairUsageLimitMessage, } from '../message/index.js';
|
|
15
|
+
import AIControl from './ai-control.js';
|
|
16
16
|
import './style.scss';
|
|
17
17
|
/**
|
|
18
18
|
* ExtensionAIControl component. Used by the AI Assistant inline extensions, adding logic and components to the base AIControl component.
|
|
@@ -74,7 +74,9 @@ export function ExtensionAIControl({ className, disabled = false, value = '', pl
|
|
|
74
74
|
}, {
|
|
75
75
|
target: promptUserInputRef,
|
|
76
76
|
});
|
|
77
|
-
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 })) }) })), isDone && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsxs(Flex, { gap: 1, role: "group", className: "jetpack-components-ai-control__button-group", children: [
|
|
77
|
+
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 })) }) })), isDone && (_jsx("div", { className: "jetpack-components-ai-control__controls-prompt_button_wrapper", children: _jsxs(Flex, { gap: 1, role: "group", className: "jetpack-components-ai-control__button-group", children: [
|
|
78
|
+
_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') })
|
|
79
|
+
] }) }))] })) }));
|
|
78
80
|
let message = null;
|
|
79
81
|
if (error?.message) {
|
|
80
82
|
message = (_jsx(ErrorMessage, { error: error.message, code: error.code, onTryAgainClick: tryAgainHandler, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));
|
|
@@ -23,5 +23,5 @@ type AiFeedbackThumbsProps = {
|
|
|
23
23
|
* @param {AiFeedbackThumbsProps} props - component props.
|
|
24
24
|
* @return {ReactElement} - rendered component.
|
|
25
25
|
*/
|
|
26
|
-
export default function AiFeedbackThumbs({ disabled, iconSize, ratedItem, feature, savedRatings, options, onRate
|
|
26
|
+
export default function AiFeedbackThumbs({ disabled, iconSize, ratedItem, feature, savedRatings, options, onRate }: AiFeedbackThumbsProps): ReactElement;
|
|
27
27
|
export {};
|
|
@@ -63,9 +63,11 @@ export default function AiFeedbackThumbs({ disabled = false, iconSize = 24, rate
|
|
|
63
63
|
});
|
|
64
64
|
}
|
|
65
65
|
};
|
|
66
|
-
return (_jsxs("div", { className: "ai-assistant-feedback__selection", children: [
|
|
66
|
+
return (_jsxs("div", { className: "ai-assistant-feedback__selection", children: [
|
|
67
|
+
_jsx(Tooltip, { text: __('I like this', 'jetpack-ai-client'), children: _jsx(Button, { disabled: disabled, icon: thumbsUp, onClick: () => rateAI(true), iconSize: iconSize, showTooltip: false, className: clsx({
|
|
67
68
|
'ai-assistant-feedback__thumb-selected': checkThumb('thumbs-up'),
|
|
68
69
|
}) }) }), _jsx(Tooltip, { text: __("I don't find this useful", 'jetpack-ai-client'), children: _jsx(Button, { disabled: disabled, icon: thumbsDown, onClick: () => rateAI(false), iconSize: iconSize, showTooltip: false, className: clsx({
|
|
69
70
|
'ai-assistant-feedback__thumb-selected': checkThumb('thumbs-down'),
|
|
70
|
-
}) }) })
|
|
71
|
+
}) }) })
|
|
72
|
+
] }));
|
|
71
73
|
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { G, Path, SVG, Rect } from '@wordpress/components';
|
|
3
|
+
import { Icon } from '@wordpress/icons';
|
|
4
|
+
import { Defs } from '@wordpress/primitives';
|
|
5
|
+
export const AiSVG = (_jsxs(SVG, { width: "42", height: "42", viewBox: "0 0 42 42", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
|
|
6
|
+
_jsxs(G, { clipPath: "url(#clip0_4479_1006)", children: [
|
|
7
|
+
_jsx(Path, { d: "M7.87488 0L10.1022 5.64753L15.7498 7.87488L10.1022 10.1022L7.87488 15.7498L5.64753 10.1022L0 7.87488L5.64753 5.64753L7.87488 0Z", fill: "#A7AAAD" }), _jsx(Path, { d: "M31.4998 0L34.4696 7.53004L41.9997 10.4998L34.4696 13.4696L31.4998 20.9997L28.53 13.4696L21 10.4998L28.53 7.53004L31.4998 0Z", fill: "#A7AAAD" }), _jsx(Path, { d: "M18.3748 15.7496L22.0871 25.1621L31.4996 28.8744L22.0871 32.5866L18.3748 41.9992L14.6625 32.5866L5.25 28.8744L14.6625 25.1621L18.3748 15.7496Z", fill: "#A7AAAD" })
|
|
8
|
+
] }), _jsx(Defs, { children: _jsx("clipPath", { id: "clip0_4479_1006", children: _jsx(Rect, { width: "41.9997", height: "41.9992", fill: "white" }) }) })
|
|
9
|
+
] }));
|
|
10
|
+
/**
|
|
11
|
+
* AiIcon component
|
|
12
|
+
* @param {string} className - The wrapper class name.
|
|
13
|
+
* @return {ReactElement} The `AiIcon` component.
|
|
14
|
+
*/
|
|
15
|
+
export default function AiIcon({ className, size = 42 }) {
|
|
16
|
+
return _jsx(Icon, { icon: AiSVG, width: size, height: size, className: className });
|
|
17
|
+
}
|
|
@@ -49,5 +49,5 @@ type AiImageModalProps = {
|
|
|
49
49
|
* @param {AiImageModalProps} props - The component properties.
|
|
50
50
|
* @return {ReactElement} - rendered component.
|
|
51
51
|
*/
|
|
52
|
-
export default function AiImageModal({ title, cost, open, images, currentIndex, onClose, onTryAgain, onGenerate, generating, notEnoughRequests, requireUpgrade, currentLimit, currentUsage, isUnlimited, upgradeDescription, hasError, handlePreviousImage, handleNextImage, acceptButton, autoStart, autoStartAction, instructionsPlaceholder, imageStyles, onGuessStyle, prompt, setPrompt, initialStyle, inputDisabled, actionDisabled
|
|
52
|
+
export default function AiImageModal({ title, cost, open, images, currentIndex, onClose, onTryAgain, onGenerate, generating, notEnoughRequests, requireUpgrade, currentLimit, currentUsage, isUnlimited, upgradeDescription, hasError, handlePreviousImage, handleNextImage, acceptButton, autoStart, autoStartAction, instructionsPlaceholder, imageStyles, onGuessStyle, prompt, setPrompt, initialStyle, inputDisabled, actionDisabled }: AiImageModalProps): import("react/jsx-runtime").JSX.Element;
|
|
53
53
|
export {};
|
|
@@ -1,16 +1,16 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
|
|
3
3
|
import { SelectControl } from '@wordpress/components';
|
|
4
4
|
import { useCallback, useRef, useState, useEffect } from '@wordpress/element';
|
|
5
5
|
import { __ } from '@wordpress/i18n';
|
|
6
6
|
import debugFactory from 'debug';
|
|
7
|
-
import { IMAGE_STYLE_NONE, IMAGE_STYLE_AUTO, } from
|
|
8
|
-
import { AiModalPromptInput } from
|
|
9
|
-
import AiModalFooter from
|
|
10
|
-
import AiAssistantModal from
|
|
11
|
-
import QuotaExceededMessage from
|
|
12
|
-
import Carrousel from
|
|
13
|
-
import UsageCounter from
|
|
7
|
+
import { IMAGE_STYLE_NONE, IMAGE_STYLE_AUTO, } from '../../../hooks/use-image-generator/constants.js';
|
|
8
|
+
import { AiModalPromptInput } from '../../../logo-generator/index.js';
|
|
9
|
+
import AiModalFooter from '../../ai-modal-footer/index.js';
|
|
10
|
+
import AiAssistantModal from '../../modal/index.js';
|
|
11
|
+
import QuotaExceededMessage from '../../quota-exceeded-message/index.js';
|
|
12
|
+
import Carrousel from './carrousel.js';
|
|
13
|
+
import UsageCounter from './usage-counter.js';
|
|
14
14
|
import './ai-image-modal.scss';
|
|
15
15
|
const FEATURED_IMAGE_UPGRADE_PROMPT_PLACEMENT = 'ai-image-generator';
|
|
16
16
|
const debug = debugFactory('jetpack-ai-client:ai-image-modal');
|
|
@@ -82,5 +82,10 @@ export default function AiImageModal({ title, cost, open, images, currentIndex =
|
|
|
82
82
|
setStyle(initialStyle || IMAGE_STYLE_NONE);
|
|
83
83
|
}
|
|
84
84
|
}, [imageStyles, initialStyle]);
|
|
85
|
-
return (_jsx(_Fragment, { children: open && (_jsxs(AiAssistantModal, { handleClose: onClose, title: title, children: [
|
|
85
|
+
return (_jsx(_Fragment, { children: open && (_jsxs(AiAssistantModal, { handleClose: onClose, title: title, children: [
|
|
86
|
+
_jsxs("div", { className: "ai-image-modal__content", children: [showStyleSelector && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [
|
|
87
|
+
_jsx("div", { style: { fontWeight: 500, flexGrow: 1 }, children: __('Generate image', 'jetpack-ai-client') }), _jsx("div", { children: _jsx(SelectControl, { __nextHasNoMarginBottom: true, __next40pxDefaultSize: true, value: style, options: styles, onChange: updateStyle }) })
|
|
88
|
+
] })), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, disabled: inputDisabled, actionDisabled: actionDisabled, generateHandler: hasError ? handleTryAgain : handleGenerate, placeholder: instructionsPlaceholder, buttonLabel: hasError ? tryAgainLabel : generateLabel }), upgradePromptVisible && (_jsx(QuotaExceededMessage, { description: upgradeDescription, placement: FEATURED_IMAGE_UPGRADE_PROMPT_PLACEMENT, useLightNudge: true })), _jsx("div", { className: "ai-image-modal__actions", children: _jsx("div", { className: "ai-image-modal__actions-left", children: counterVisible && (_jsx(UsageCounter, { cost: cost, currentLimit: currentLimit, currentUsage: currentUsage })) }) }), _jsx("div", { className: "ai-image-modal__image-canvas", children: _jsx(Carrousel, { images: images, current: currentIndex, handlePreviousImage: handlePreviousImage, handleNextImage: handleNextImage, actions: acceptButton }) })
|
|
89
|
+
] }), _jsx("div", { className: "ai-image-modal__footer", children: _jsx(AiModalFooter, {}) })
|
|
90
|
+
] })) }));
|
|
86
91
|
}
|
|
@@ -24,5 +24,5 @@ type CarrouselProps = {
|
|
|
24
24
|
* @param {CarrouselProps} props - The component properties.
|
|
25
25
|
* @return {ReactElement} - rendered component.
|
|
26
26
|
*/
|
|
27
|
-
export default function Carrousel({ images, current, handlePreviousImage, handleNextImage, actions
|
|
27
|
+
export default function Carrousel({ images, current, handlePreviousImage, handleNextImage, actions }: CarrouselProps): import("react/jsx-runtime").JSX.Element;
|
|
28
28
|
export {};
|
|
@@ -1,11 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { Spinner } from '@wordpress/components';
|
|
3
3
|
import { useEffect, useState } from '@wordpress/element';
|
|
4
4
|
import { __ } from '@wordpress/i18n';
|
|
5
5
|
import { Icon, chevronLeft, chevronRight } from '@wordpress/icons';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
|
-
import AiFeedbackThumbs from
|
|
8
|
-
import AiIcon from
|
|
7
|
+
import AiFeedbackThumbs from '../../ai-feedback/index.js';
|
|
8
|
+
import AiIcon from '../../ai-icon/index.js';
|
|
9
9
|
import './carrousel.scss';
|
|
10
10
|
/**
|
|
11
11
|
* BlankImage component
|
|
@@ -16,7 +16,8 @@ function BlankImage({ children, isDotted = false, contentClassName = '' }) {
|
|
|
16
16
|
const blankImage = (_jsx("img", { className: "ai-assistant-image__carrousel-image", src: "data:image/svg+xml,<svg viewBox='0 0 1 1' width='1024' height='768' xmlns='http://www.w3.org/2000/svg'><path d='M0 0 L1 0 L1 1 L0 1 L0 0 Z' fill='none' /></svg>", alt: "" }));
|
|
17
17
|
return (_jsxs("div", { className: "ai-assistant-image__blank", children: [blankImage, _jsx("div", { className: clsx('ai-assistant-image__blank-content', contentClassName, {
|
|
18
18
|
'is-dotted': isDotted,
|
|
19
|
-
}), children: children })
|
|
19
|
+
}), children: children })
|
|
20
|
+
] }));
|
|
20
21
|
}
|
|
21
22
|
/**
|
|
22
23
|
* Carrousel component
|
|
@@ -49,15 +50,22 @@ export default function Carrousel({ images, current, handlePreviousImage, handle
|
|
|
49
50
|
}
|
|
50
51
|
setImageFeedbackDisabled(false);
|
|
51
52
|
}, [current, images]);
|
|
52
|
-
return (_jsxs("div", { className: "ai-assistant-image__carrousel", children: [
|
|
53
|
+
return (_jsxs("div", { className: "ai-assistant-image__carrousel", children: [
|
|
54
|
+
_jsxs("div", { className: "ai-assistant-image__carrousel-images", children: [images.length > 1 && prevButton, images.map(({ image, generating, error, revisedPrompt, libraryUrl }, index) => (_jsx("div", { className: clsx('ai-assistant-image__carrousel-image-container', {
|
|
53
55
|
'is-current': current === index,
|
|
54
56
|
'is-prev': current > index,
|
|
55
57
|
}), children: generating ? (_jsxs(BlankImage, { contentClassName: "ai-assistant-image__loading", children: [__('Creating image…', 'jetpack-ai-client'), _jsx(Spinner, { style: {
|
|
56
58
|
width: '50px',
|
|
57
59
|
height: '50px',
|
|
58
|
-
} })
|
|
60
|
+
} })
|
|
61
|
+
] })) : (_jsx(_Fragment, { children: error ? (_jsx(BlankImage, { isDotted: true, children: _jsxs("div", { className: "ai-assistant-image__error", children: [__('An error occurred while generating the image. Please, try again!', 'jetpack-ai-client'), error?.message && (_jsx("span", { className: "ai-assistant-image__error-message", children: error?.message }))] }) })) : (_jsx(_Fragment, { children: !generating && !image && !libraryUrl ? (_jsx(BlankImage, { children: _jsx(AiIcon, {}) })) : (_jsx("img", { className: "ai-assistant-image__carrousel-image", src: image || libraryUrl, alt: revisedPrompt })) })) })) }, `image:` + index))), images.length > 1 && nextButton] }), _jsxs("div", { className: "ai-assistant-image__carrousel-footer", children: [
|
|
62
|
+
_jsxs("div", { className: "ai-assistant-image__carrousel-footer-left", children: [
|
|
63
|
+
_jsxs("div", { className: "ai-assistant-image__carrousel-counter", children: [prevButton, actual, " / ", total, nextButton] }), _jsx(AiFeedbackThumbs, { disabled: imageFeedbackDisabled, ratedItem: images[current]?.libraryUrl || '', iconSize: 20, options: {
|
|
59
64
|
mediaLibraryId: Number(images[current].libraryId),
|
|
60
65
|
prompt: images[current].prompt,
|
|
61
66
|
revisedPrompt: images[current].revisedPrompt,
|
|
62
|
-
}, feature: "image-generator" })
|
|
67
|
+
}, feature: "image-generator" })
|
|
68
|
+
] }), _jsx("div", { className: "ai-assistant-image__carrousel-actions", children: actions })
|
|
69
|
+
] })
|
|
70
|
+
] }));
|
|
63
71
|
}
|
|
@@ -19,5 +19,7 @@ export default function UsageCounter({ currentLimit, currentUsage, cost }) {
|
|
|
19
19
|
__('Requests available: <counter>%d</counter>', 'jetpack-ai-client'), requestsBalance), {
|
|
20
20
|
counter: requestsBalance < cost ? (_jsx("span", { className: "ai-assistant-featured-image__usage-counter-no-limit" })) : (_jsx("strong", {})),
|
|
21
21
|
});
|
|
22
|
-
return (_jsxs("div", { className: "ai-assistant-featured-image__usage-counter", children: [
|
|
22
|
+
return (_jsxs("div", { className: "ai-assistant-featured-image__usage-counter", children: [
|
|
23
|
+
_jsx("span", { children: requestsNeeded }), _jsx("span", { children: requestsAvailable })
|
|
24
|
+
] }));
|
|
23
25
|
}
|
|
@@ -10,5 +10,5 @@ type FeaturedImageProps = {
|
|
|
10
10
|
* @param {FeaturedImageProps} props - The component properties.
|
|
11
11
|
* @return {ReactElement} - rendered component.
|
|
12
12
|
*/
|
|
13
|
-
export default function FeaturedImage({ busy, disabled, placement, onClose
|
|
13
|
+
export default function FeaturedImage({ busy, disabled, placement, onClose }: FeaturedImageProps): import("react/jsx-runtime").JSX.Element;
|
|
14
14
|
export {};
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import { useAnalytics, PLAN_TYPE_UNLIMITED, usePlanType, } from '@automattic/jetpack-shared-extension-utils';
|
|
3
3
|
import { Button } from '@wordpress/components';
|
|
4
4
|
import { useDispatch, useSelect } from '@wordpress/data';
|
|
@@ -7,14 +7,14 @@ import { useCallback, useState } from '@wordpress/element';
|
|
|
7
7
|
import { __, sprintf } from '@wordpress/i18n';
|
|
8
8
|
import debugFactory from 'debug';
|
|
9
9
|
import './style.scss';
|
|
10
|
-
import { PLACEMENT_JETPACK_SIDEBAR, PLACEMENT_DOCUMENT_SETTINGS } from
|
|
11
|
-
import useAiFeature from
|
|
12
|
-
import usePostContent from
|
|
13
|
-
import useSaveToMediaLibrary from
|
|
14
|
-
import AiImageModal from
|
|
15
|
-
import useAiImage from
|
|
16
|
-
import useSiteType from
|
|
17
|
-
import { FEATURED_IMAGE_FEATURE_NAME, IMAGE_GENERATION_MODEL_STABLE_DIFFUSION, IMAGE_GENERATION_MODEL_DALL_E_3, PLACEMENT_MEDIA_SOURCE_DROPDOWN, } from
|
|
10
|
+
import { PLACEMENT_JETPACK_SIDEBAR, PLACEMENT_DOCUMENT_SETTINGS } from '../../constants.js';
|
|
11
|
+
import useAiFeature from '../../hooks/use-ai-feature/index.js';
|
|
12
|
+
import usePostContent from '../../hooks/use-post-content.js';
|
|
13
|
+
import useSaveToMediaLibrary from '../../hooks/use-save-to-media-library.js';
|
|
14
|
+
import AiImageModal from './components/ai-image-modal.js';
|
|
15
|
+
import useAiImage from './hooks/use-ai-image.js';
|
|
16
|
+
import useSiteType from './hooks/use-site-type.js';
|
|
17
|
+
import { FEATURED_IMAGE_FEATURE_NAME, IMAGE_GENERATION_MODEL_STABLE_DIFFUSION, IMAGE_GENERATION_MODEL_DALL_E_3, PLACEMENT_MEDIA_SOURCE_DROPDOWN, } from './types.js';
|
|
18
18
|
const debug = debugFactory('jetpack-ai-client:featured-image');
|
|
19
19
|
/**
|
|
20
20
|
* FeaturedImage component
|
|
@@ -268,5 +268,8 @@ export default function FeaturedImage({ busy, disabled, placement, onClose = ()
|
|
|
268
268
|
currentImage?.generating ||
|
|
269
269
|
currentImage?.libraryId === postFeaturedMediaId, children: __('Set as featured image', 'jetpack-ai-client') }));
|
|
270
270
|
return (_jsxs(_Fragment, { children: [(placement === PLACEMENT_JETPACK_SIDEBAR ||
|
|
271
|
-
placement === PLACEMENT_DOCUMENT_SETTINGS) && (_jsxs(_Fragment, { children: [
|
|
271
|
+
placement === PLACEMENT_DOCUMENT_SETTINGS) && (_jsxs(_Fragment, { children: [
|
|
272
|
+
_jsx("p", { className: "jetpack-ai-assistant__help-text", children: __('Based on your post content.', 'jetpack-ai-client') }), _jsx(Button, { onClick: handleModalOpen, isBusy: busy, disabled: disabled || notEnoughRequests, variant: "secondary", __next40pxDefaultSize: true, children: __('Generate image', 'jetpack-ai-client') })
|
|
273
|
+
] })), _jsx(AiImageModal, { autoStart: hasContent && !postFeaturedMediaId, autoStartAction: handleFirstGenerate, images: images, currentIndex: current, title: __('Generate a featured image with AI', 'jetpack-ai-client'), cost: featuredImageCost, open: isFeaturedImageModalVisible, placement: placement, onClose: handleModalClose, onTryAgain: handleTryAgain, onGenerate: pointer?.current > 0 || postFeaturedMediaId ? handleRegenerate : handleGenerate, generating: currentPointer?.generating, notEnoughRequests: notEnoughRequests, requireUpgrade: requireUpgrade, upgradeDescription: upgradeDescription, currentLimit: requestsLimit, currentUsage: requestsCount, isUnlimited: isUnlimited, hasError: Boolean(currentPointer?.error), handlePreviousImage: handlePreviousImage, handleNextImage: handleNextImage, acceptButton: acceptButton, generateButtonLabel: pointer?.current > 0 ? generateAgainText : generateText, instructionsPlaceholder: __("Describe the featured image you'd like to create and select a style.", 'jetpack-ai-client'), imageStyles: imageStyles, onGuessStyle: handleGuessStyle, prompt: prompt, setPrompt: setPrompt, initialStyle: requestStyle, inputDisabled: disableInput, actionDisabled: disableAction })
|
|
274
|
+
] }));
|
|
272
275
|
}
|
|
@@ -17,5 +17,5 @@ type GeneralPurposeImageProps = {
|
|
|
17
17
|
* @param {GeneralPurposeImageProps} props - The component properties.
|
|
18
18
|
* @return {ReactElement} - rendered component.
|
|
19
19
|
*/
|
|
20
|
-
export default function GeneralPurposeImage({ placement, onClose, onSetImage
|
|
20
|
+
export default function GeneralPurposeImage({ placement, onClose, onSetImage }: GeneralPurposeImageProps): import("react/jsx-runtime").JSX.Element;
|
|
21
21
|
export {};
|
|
@@ -5,13 +5,13 @@ import { useCallback, useState } from '@wordpress/element';
|
|
|
5
5
|
import { __, sprintf } from '@wordpress/i18n';
|
|
6
6
|
import debugFactory from 'debug';
|
|
7
7
|
import './style.scss';
|
|
8
|
-
import useAiFeature from
|
|
9
|
-
import usePostContent from
|
|
10
|
-
import useSaveToMediaLibrary from
|
|
11
|
-
import AiImageModal from
|
|
12
|
-
import useAiImage from
|
|
13
|
-
import useSiteType from
|
|
14
|
-
import { IMAGE_GENERATION_MODEL_STABLE_DIFFUSION, IMAGE_GENERATION_MODEL_DALL_E_3, GENERAL_IMAGE_FEATURE_NAME, } from
|
|
8
|
+
import useAiFeature from '../../hooks/use-ai-feature/index.js';
|
|
9
|
+
import usePostContent from '../../hooks/use-post-content.js';
|
|
10
|
+
import useSaveToMediaLibrary from '../../hooks/use-save-to-media-library.js';
|
|
11
|
+
import AiImageModal from './components/ai-image-modal.js';
|
|
12
|
+
import useAiImage from './hooks/use-ai-image.js';
|
|
13
|
+
import useSiteType from './hooks/use-site-type.js';
|
|
14
|
+
import { IMAGE_GENERATION_MODEL_STABLE_DIFFUSION, IMAGE_GENERATION_MODEL_DALL_E_3, GENERAL_IMAGE_FEATURE_NAME, } from './types.js';
|
|
15
15
|
const debug = debugFactory('jetpack-ai:general-purpose-image');
|
|
16
16
|
/**
|
|
17
17
|
* GeneralPurposeImage component
|
|
@@ -31,7 +31,7 @@ type UseAiImageProps = {
|
|
|
31
31
|
* @param {UseAiImageProps} props - The component properties.
|
|
32
32
|
* @return {UseAiImageReturn} - Object containing properties for AiImage.
|
|
33
33
|
*/
|
|
34
|
-
export default function useAiImage({ feature, type, cost, autoStart, previousMediaId
|
|
34
|
+
export default function useAiImage({ feature, type, cost, autoStart, previousMediaId }: UseAiImageProps): {
|
|
35
35
|
current: number;
|
|
36
36
|
setCurrent: import("react").Dispatch<import("react").SetStateAction<number>>;
|
|
37
37
|
processImageGeneration: ({ userPrompt, postContent, notEnoughRequests, style, }: ProcessImageGenerationProps) => Promise<ImageResponse>;
|
|
@@ -42,6 +42,6 @@ export default function useAiImage({ feature, type, cost, autoStart, previousMed
|
|
|
42
42
|
images: CarrouselImages;
|
|
43
43
|
pointer: import("react").MutableRefObject<number>;
|
|
44
44
|
imageStyles: ImageStyleObject[];
|
|
45
|
-
guessStyle: (prompt: string, requestType?: string, content?: string) => Promise<ImageStyle
|
|
45
|
+
guessStyle: (prompt: string, requestType?: string, content?: string) => Promise<ImageStyle>;
|
|
46
46
|
};
|
|
47
47
|
export {};
|
|
@@ -8,14 +8,14 @@ import { cleanForSlug } from '@wordpress/url';
|
|
|
8
8
|
/**
|
|
9
9
|
* Internal dependencies
|
|
10
10
|
*/
|
|
11
|
-
import askQuestionSync from
|
|
12
|
-
import useAiFeature from
|
|
13
|
-
import useImageGenerator from
|
|
14
|
-
import useSaveToMediaLibrary from
|
|
11
|
+
import askQuestionSync from '../../../ask-question/sync.js';
|
|
12
|
+
import useAiFeature from '../../../hooks/use-ai-feature/index.js';
|
|
13
|
+
import useImageGenerator from '../../../hooks/use-image-generator/index.js';
|
|
14
|
+
import useSaveToMediaLibrary from '../../../hooks/use-save-to-media-library.js';
|
|
15
15
|
/**
|
|
16
16
|
* Types
|
|
17
17
|
*/
|
|
18
|
-
import { FEATURED_IMAGE_FEATURE_NAME, } from
|
|
18
|
+
import { FEATURED_IMAGE_FEATURE_NAME, } from '../types.js';
|
|
19
19
|
/**
|
|
20
20
|
* Hook to get properties for AiImage
|
|
21
21
|
*
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import FeaturedImage from
|
|
2
|
-
import GeneralPurposeImage from
|
|
3
|
-
import { PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON } from
|
|
1
|
+
import FeaturedImage from './featured-image.js';
|
|
2
|
+
import GeneralPurposeImage from './general-purpose-image.js';
|
|
3
|
+
import { PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON } from './types.js';
|
|
4
4
|
export { FeaturedImage, PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON, GeneralPurposeImage, };
|
|
@@ -16,5 +16,5 @@ type AiModalFooterProps = {
|
|
|
16
16
|
* @param {AiModalFooterProps} props - component props.
|
|
17
17
|
* @return {ReactElement} - rendered component.
|
|
18
18
|
*/
|
|
19
|
-
export default function AiModalFooter({ onGuidelinesClick, onFeedbackClick
|
|
19
|
+
export default function AiModalFooter({ onGuidelinesClick, onFeedbackClick }: AiModalFooterProps): ReactElement;
|
|
20
20
|
export {};
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
/**
|
|
3
|
+
* External dependencies
|
|
4
|
+
*/
|
|
5
|
+
import { Button } from '@wordpress/components';
|
|
6
|
+
import { useCallback } from '@wordpress/element';
|
|
7
|
+
import { __ } from '@wordpress/i18n';
|
|
8
|
+
import { Icon, info } from '@wordpress/icons';
|
|
9
|
+
/**
|
|
10
|
+
* Internal dependencies
|
|
11
|
+
*/
|
|
12
|
+
import './style.scss';
|
|
13
|
+
/**
|
|
14
|
+
* AiModalFooter component.
|
|
15
|
+
*
|
|
16
|
+
* @param {AiModalFooterProps} props - component props.
|
|
17
|
+
* @return {ReactElement} - rendered component.
|
|
18
|
+
*/
|
|
19
|
+
export default function AiModalFooter({ onGuidelinesClick, onFeedbackClick, }) {
|
|
20
|
+
const handleGuidelinesClick = useCallback(() => {
|
|
21
|
+
onGuidelinesClick?.();
|
|
22
|
+
}, [onGuidelinesClick]);
|
|
23
|
+
const handleFeedbackClick = useCallback(() => {
|
|
24
|
+
onFeedbackClick?.();
|
|
25
|
+
}, [onFeedbackClick]);
|
|
26
|
+
return (_jsxs(_Fragment, { children: [
|
|
27
|
+
_jsxs("div", { className: "ai-image-modal__footer-disclaimer", children: [
|
|
28
|
+
_jsx(Icon, { icon: info }), _jsx("span", { children: __('Generated images could be inaccurate, biased or include text.', 'jetpack-ai-client') }), _jsx(Button, { variant: "link", className: "ai-image-modal__guidelines-button", href: "https://jetpack.com/redirect/?source=ai-guidelines", target: "_blank", onClick: handleGuidelinesClick, children: _jsxs("span", { children: [__('Guidelines', 'jetpack-ai-client'), " \u2197"] }) })
|
|
29
|
+
] }), _jsx(Button, { variant: "link", className: "ai-image-modal__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: _jsxs("span", { children: [__('Give feedback', 'jetpack-ai-client'), " \u2197"] }) })
|
|
30
|
+
] }));
|
|
31
|
+
}
|
|
@@ -9,5 +9,5 @@ type AudioDurationDisplayProps = {
|
|
|
9
9
|
* @param {AudioDurationDisplayProps} props - Component props.
|
|
10
10
|
* @return {ReactElement} Rendered component.
|
|
11
11
|
*/
|
|
12
|
-
export default function AudioDurationDisplay({ duration, className
|
|
12
|
+
export default function AudioDurationDisplay({ duration, className }: AudioDurationDisplayProps): ReactElement;
|
|
13
13
|
export {};
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export { AIControl, BlockAIControl, ExtensionAIControl } from './ai-control/index.js';
|
|
2
|
+
export { default as AiFeedbackThumbs } from './ai-feedback/index.js';
|
|
3
|
+
export { default as AiIcon, AiSVG } from './ai-icon/index.js';
|
|
4
|
+
export { FeaturedImage, GeneralPurposeImage, PLACEMENT_MEDIA_SOURCE_DROPDOWN, PLACEMENT_BLOCK_PLACEHOLDER_BUTTON, } from './ai-image/index.js';
|
|
5
|
+
export { default as AiStatusIndicator } from './ai-status-indicator/index.js';
|
|
6
|
+
export { default as AudioDurationDisplay } from './audio-duration-display/index.js';
|
|
7
|
+
export { default as AiModalFooter } from './ai-modal-footer/index.js';
|
|
8
|
+
export { GuidelineMessage, UpgradeMessage, ErrorMessage, default as FooterMessage, } from './message/index.js';
|
|
9
|
+
export { default as AiAssistantModal } from './modal/index.js';
|
|
10
|
+
export { default as QuotaExceededMessage, FairUsageNotice, } from './quota-exceeded-message/index.js';
|