@automattic/jetpack-ai-client 0.27.6 → 0.27.7

package/CHANGELOG.md

@@ -5,6 +5,14 @@ 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.27.7] - 2025-04-07
+### Changed
+- Code: First pass of style coding standards. [#42734]
+- Update package dependencies. [#42762] [#42809]
+
+### Fixed
+- Fix TypeScript type checking in the monorepo. [#42817]
+
 ## [0.27.6] - 2025-03-31
 ### Changed
 - Update dependencies. [#42678]
@@ -576,6 +584,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - 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] [#31659] [#31785]
 
+[0.27.7]: https://github.com/Automattic/jetpack-ai-client/compare/v0.27.6...v0.27.7
 [0.27.6]: https://github.com/Automattic/jetpack-ai-client/compare/v0.27.5...v0.27.6
 [0.27.5]: https://github.com/Automattic/jetpack-ai-client/compare/v0.27.4...v0.27.5
 [0.27.4]: https://github.com/Automattic/jetpack-ai-client/compare/v0.27.3...v0.27.4

package/build/api-fetch/index.d.ts

@@ -2,5 +2,7 @@
  * External dependencies
  */
 import apiFetchMod from '@wordpress/api-fetch';
-declare const _default: typeof apiFetchMod.default;
+declare const apiFetch: typeof apiFetchMod.default;
+type ApiFetchType = typeof apiFetch extends Function ? typeof apiFetch : typeof apiFetchMod;
+declare const _default: ApiFetchType;
 export default _default;

package/build/components/ai-control/ai-control.d.ts

@@ -1,3 +1,7 @@
+/**
+ * External dependencies
+ */
+import { PlainText } from '@wordpress/block-editor';
 import React from 'react';
 import './style.scss';
 /**
@@ -17,7 +21,7 @@ type AIControlProps = {
     error?: ReactElement;
     actions?: ReactElement;
     message?: ReactElement;
-    promptUserInputRef?: React.MutableRefObject<HTMLInputElement>;
+    promptUserInputRef?: PlainText.Props['ref'];
     wrapperRef?: React.MutableRefObject<HTMLDivElement | null>;
 };
 /**

package/build/components/ai-image/components/ai-image-modal.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 /**
  * Internal dependencies
  */

package/build/components/ai-image/components/carrousel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import './carrousel.scss';
 export type CarrouselImageData = {
     image?: string;

package/build/components/ai-image/hooks/use-ai-image.js

@@ -109,8 +109,8 @@ export default function useAiImage({ feature, type, cost, autoStart = true, prev
              */
             const generateImagePromise = generateImageWithParameters({
                 feature,
-                size: '1792x1024',
-                responseFormat: 'b64_json',
+                size: '1792x1024', // the size, when the generation happens with DALL-E-3
+                responseFormat: 'b64_json', // the response format, when the generation happens with DALL-E-3
                 messages: [
                     {
                         role: 'jetpack-ai',

package/build/components/modal/index.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" resolution-mode="require"/>
 import type { RequestingStateProp } from '../../types.js';
 import './style.scss';
 type AiAssistantModalProps = {

package/build/hooks/use-ai-feature/index.d.ts

@@ -22,7 +22,7 @@ export default function useAiFeature(): {
         nextStart: string;
         requestsCount: number;
     };
-    nextTier?: import("@automattic/jetpack-shared-extension-utils/store/wordpress-com/types").TierProp;
+    nextTier?: import("@automattic/jetpack-shared-extension-utils/store/wordpress-com/types").TierProp | null;
     tierPlansEnabled?: boolean;
     costs?: {
         [key: string]: {

package/build/hooks/use-ai-feature/index.js

@@ -22,7 +22,7 @@ export default function useAiFeature() {
             requestsCount,
             requestsLimit,
             loading,
-            error: null,
+            error: null, // @todo: handle error at store level
             refresh: loadFeatures,
             increaseRequestsCount,
             dequeueAsyncRequest,

package/build/hooks/use-image-generator/index.d.ts

@@ -10,7 +10,7 @@ declare const useImageGenerator: () => {
     generateImage: ({ feature, postContent, responseFormat, userPrompt, }: {
         feature: string;
         postContent: string;
-        responseFormat?: 'url' | 'b64_json';
+        responseFormat?: "url" | "b64_json";
         userPrompt?: string;
     }) => Promise<ImageGenerationResponse>;
     generateImageWithStableDiffusion: ({ feature, postContent, userPrompt, }: {

package/build/logo-generator/store/reducer.d.ts

@@ -72,10 +72,10 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
             errorCode?: string;
             upgradeType: import("./types.js").UpgradeTypeProp;
             currentTier?: import("./types.js").TierProp;
-            nextTier?: import("./types.js").TierProp;
+            nextTier?: import("./types.js").TierProp | null;
             tierPlansEnabled?: boolean;
             costs?: {
-                'jetpack-ai-logo-generator': {
+                "jetpack-ai-logo-generator": {
                     logo: number;
                 };
             };
@@ -103,7 +103,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
         isLoadingHistory: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     history: {
@@ -148,7 +148,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -169,7 +169,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -190,7 +190,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -211,7 +211,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     features: {
@@ -236,10 +236,10 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
                 nextStart: string;
                 requestsCount: number;
             };
-            nextTier?: import("./types.js").TierProp;
+            nextTier?: import("./types.js").TierProp | null;
             tierPlansEnabled?: boolean;
             costs?: {
-                'jetpack-ai-logo-generator': {
+                "jetpack-ai-logo-generator": {
                     logo: number;
                 };
             };
@@ -261,7 +261,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
         isLoadingHistory?: boolean;
     };
     siteDetails?: SiteDetails | Record<string, never>;
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -282,7 +282,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -303,7 +303,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -324,7 +324,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -345,7 +345,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -366,7 +366,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -387,7 +387,7 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 } | {
     _meta: {
@@ -408,6 +408,6 @@ export default function reducer(state: import("./types.js").LogoGeneratorStatePr
     features: {
         aiAssistantFeature?: AiFeatureStateProps;
     };
-    history: import("./types.js").Logo[];
+    history: Array<import("./types.js").Logo>;
     selectedLogoIndex: number;
 };

package/build/logo-generator/store/reducer.js

@@ -48,7 +48,7 @@ export default function reducer(state = INITIAL_STATE, action) {
                         _meta: {
                             ...state?.features?.aiAssistantFeature?._meta,
                             isRequesting: true,
-                            asyncRequestCountdown: ASYNC_REQUEST_COUNTDOWN_INIT_VALUE,
+                            asyncRequestCountdown: ASYNC_REQUEST_COUNTDOWN_INIT_VALUE, // restore the countdown
                             asyncRequestTimerId: 0, // reset the timer id
                         },
                     },

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.27.6",
+	"version": "0.27.7",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -20,6 +20,7 @@
 		"compile-ts": "tsc --pretty",
 		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
 		"test-coverage": "pnpm run test --coverage",
+		"typecheck": "tsc --noEmit",
 		"watch": "tsc --watch --pretty"
 	},
 	"type": "module",
@@ -33,7 +34,7 @@
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
 		"storybook": "8.6.7",
-		"typescript": "5.0.4"
+		"typescript": "5.8.2"
 	},
 	"exports": {
 		".": {
@@ -44,28 +45,28 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.44",
-		"@automattic/jetpack-components": "^0.72.0",
-		"@automattic/jetpack-connection": "^0.39.7",
-		"@automattic/jetpack-shared-extension-utils": "^0.18.8",
+		"@automattic/jetpack-base-styles": "^0.7.0",
+		"@automattic/jetpack-components": "^0.72.3",
+		"@automattic/jetpack-connection": "^0.39.10",
+		"@automattic/jetpack-shared-extension-utils": "^0.18.11",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/jest": "29.5.14",
 		"@types/react": "18.3.18",
 		"@types/wordpress__block-editor": "11.5.16",
-		"@wordpress/api-fetch": "7.19.0",
-		"@wordpress/base-styles": "5.19.0",
-		"@wordpress/blob": "4.19.0",
-		"@wordpress/blocks": "14.8.0",
-		"@wordpress/block-editor": "14.14.0",
-		"@wordpress/components": "29.5.0",
-		"@wordpress/compose": "7.19.0",
-		"@wordpress/data": "10.19.0",
-		"@wordpress/editor": "14.19.0",
-		"@wordpress/element": "6.19.0",
-		"@wordpress/i18n": "5.19.0",
-		"@wordpress/icons": "10.19.0",
-		"@wordpress/primitives": "4.19.0",
-		"@wordpress/url": "4.19.0",
+		"@wordpress/api-fetch": "7.21.0",
+		"@wordpress/base-styles": "5.21.0",
+		"@wordpress/blob": "4.21.0",
+		"@wordpress/blocks": "14.10.0",
+		"@wordpress/block-editor": "14.16.0",
+		"@wordpress/components": "29.7.0",
+		"@wordpress/compose": "7.21.0",
+		"@wordpress/data": "10.21.0",
+		"@wordpress/editor": "14.21.0",
+		"@wordpress/element": "6.21.0",
+		"@wordpress/i18n": "5.21.0",
+		"@wordpress/icons": "10.21.0",
+		"@wordpress/primitives": "4.21.0",
+		"@wordpress/url": "4.21.0",
 		"clsx": "2.1.1",
 		"debug": "4.4.0",
 		"markdown-it": "14.1.0",

package/src/components/ai-control/ai-control.tsx

@@ -27,7 +27,7 @@ type AIControlProps = {
 	error?: ReactElement;
 	actions?: ReactElement;
 	message?: ReactElement;
-	promptUserInputRef?: React.MutableRefObject< HTMLInputElement >;
+	promptUserInputRef?: PlainText.Props[ 'ref' ];
 	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
 };
 

package/src/components/ai-control/style.scss

@@ -89,6 +89,7 @@
 }
 
 .jetpack-components-ai-control__controls-prompt_button {
+
 	&:disabled {
 		opacity: 0.6;
 		cursor: not-allowed;

package/src/components/ai-feedback/style.scss

@@ -1,6 +1,7 @@
 @import "@wordpress/base-styles/colors";
 
 .ai-assistant-feedback {
+
 	&__selection {
 		display: flex;
 

package/src/components/ai-image/components/ai-image-modal.scss

@@ -1,4 +1,5 @@
 .ai-image-modal {
+
 	&__content {
 		display: flex;
 		margin-top: 32px;
@@ -68,6 +69,7 @@
 	&__image-canvas {
 		width: 100%;
 		margin-top: 24px;
+
 		& > .jetpack-ai-upgrade-banner {
 			margin-bottom: 8px;
 		}

package/src/components/ai-image/components/carrousel.scss

@@ -1,6 +1,7 @@
 $scale-factor: 0.55;
 
 .ai-assistant-image {
+
 	&__blank {
 		display: flex;
 		justify-content: center;
@@ -52,6 +53,7 @@ $scale-factor: 0.55;
 			height: calc( 768px * $scale-factor );
 
 			.ai-carrousel {
+
 				&__prev {
 					left: 0;
 				}
@@ -62,6 +64,7 @@ $scale-factor: 0.55;
 
 				&__prev,
 				&__next {
+
 					&:hover {
 						background-color: rgba( 0, 0, 0, 0.3 );
 						opacity: 1;
@@ -69,6 +72,7 @@ $scale-factor: 0.55;
 
 					&-icon {
 						fill: white;
+
 						&.is-disabled {
 							fill: gray;
 						}
@@ -111,6 +115,7 @@ $scale-factor: 0.55;
 			padding: 6px 0;
 
 			.ai-carrousel {
+
 				&__prev,
 				&__next {
 					display: flex;
@@ -122,6 +127,7 @@ $scale-factor: 0.55;
 					padding: 0;
 
 					&-icon {
+
 						&.is-disabled {
 							fill: gray;
 						}

package/src/components/ai-image/style.scss

@@ -1,4 +1,5 @@
 .ai-assistant-featured-image {
+
 	&__content {
 		display: flex;
 		margin-top: 32px;
@@ -61,6 +62,7 @@
 	&__image-canvas {
 		width: 100%;
 		margin-top: 24px;
+
 		& > .jetpack-ai-upgrade-banner {
 			margin-bottom: 8px;
 		}

package/src/components/modal/style.scss

@@ -1,4 +1,5 @@
 .ai-assistant-modal {
+
 	@media (min-width: 960px) {
 		max-height: 95%;
 	}
@@ -6,6 +7,7 @@
 	&__content {
 		display: flex;
 		flex-direction: column;
+
 		@media screen and (min-width: 960px) {
 			width: 100vw;
 		}

package/src/components/quota-exceeded-message/style.scss

@@ -5,7 +5,9 @@
 }
 
 .jetpack-upgrade-plan-banner.jetpack-ai-upgrade-banner {
+
     .jetpack-upgrade-plan-banner__wrapper {
+
         .components-button.is-primary.is-busy {
             background: var( --jp-white );
             color: var( --jp-black );

package/src/logo-generator/assets/icons/icons.scss

@@ -1,4 +1,5 @@
 .jetpack-ai-logo-generator-icon {
+
 	path {
 		fill: var(--color-link, #3858e9);
 	}

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

@@ -1,6 +1,7 @@
 @import '@automattic/jetpack-base-styles/root-variables';
 
 .jetpack-ai-logo-generator-modal {
+
 	@media (min-width: 960px) {
 		max-height: 90%;
 	}

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

@@ -6,6 +6,7 @@
 	gap: 8px;
 
 	.components-button {
+
 		&:focus:not(:disabled):not(.is-primary) {
 			box-shadow: 0 0 0 2px var(--color-link, #3858e9);
 		}

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

@@ -7,6 +7,7 @@
 	font-size: var(--font-body-small);
 
 	.components-button {
+
 		&:focus:not(:disabled):not(.is-primary) {
 			box-shadow: 0 0 0 2px var(--color-link, #3858e9);
 		}