@automattic/jetpack-ai-client 0.27.4 → 0.27.6

package/CHANGELOG.md

@@ -5,6 +5,21 @@ 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.6] - 2025-03-31
+### Changed
+- Update dependencies. [#42678]
+
+### Fixed
+- Components: Prevent deprecation notices by adding `__next40pxDefaultSize` to controls. [#42677]
+
+## [0.27.5] - 2025-03-24
+### Changed
+- Update dependencies. [#42565]
+
+### Fixed
+- AI Client: Improve performance by optimizing state management in the AI feature hook. [#42536]
+- AI Controls: Prevent console warnings by increasing compatibility of buttons. [#42636]
+
 ## [0.27.4] - 2025-03-18
 ### Changed
 - Update package dependencies. [#42509]
@@ -561,6 +576,8 @@ 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.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
 [0.27.3]: https://github.com/Automattic/jetpack-ai-client/compare/v0.27.2...v0.27.3
 [0.27.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.27.1...v0.27.2

package/build/components/ai-control/block-ai-control.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-run
 /**
  * External dependencies
  */
-import { Button, ButtonGroup } from '@wordpress/components';
+import { Button, Flex } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
 import { useImperativeHandle, useRef, useEffect, useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -75,7 +75,7 @@ export function BlockAIControl({ disabled = false, value = '', placeholder = '',
     }, {
         target: promptUserInputRef,
     });
-    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(ButtonGroup, { children: [_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 }) })] })), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onAccept, variant: "primary", label: acceptLabel, children: showButtonLabels ? acceptLabel : _jsx(Icon, { icon: check }) })] }))] }));
+    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: [_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 }) })] })), _jsx(Button, { className: "jetpack-components-ai-control__controls-prompt_button", onClick: onAccept, variant: "primary", label: acceptLabel, children: showButtonLabels ? acceptLabel : _jsx(Icon, { icon: check }) })] }))] }));
     const message = showGuideLine &&
         !loading &&
         !editRequest &&

package/build/components/ai-control/extension-ai-control.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 /**
  * External dependencies
  */
-import { Button, ButtonGroup } from '@wordpress/components';
+import { Button, Flex } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
 import { useImperativeHandle, useRef, useEffect, useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -74,7 +74,7 @@ export function ExtensionAIControl({ className, disabled = false, value = '', pl
     }, {
         target: promptUserInputRef,
     });
-    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(ButtonGroup, { children: [_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') })] }) }))] })) }));
+    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: [_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') })] }) }))] })) }));
     let message = null;
     if (error?.message) {
         message = (_jsx(ErrorMessage, { error: error.message, code: error.code, onTryAgainClick: tryAgainHandler, onUpgradeClick: upgradeHandler, upgradeUrl: upgradeUrl }));

package/build/components/ai-image/components/ai-image-modal.js

@@ -88,5 +88,5 @@ export default function AiImageModal({ title, cost, open, images, currentIndex =
             setStyle(initialStyle || IMAGE_STYLE_NONE);
         }
     }, [imageStyles, initialStyle]);
-    return (_jsx(_Fragment, { children: open && (_jsxs(AiAssistantModal, { handleClose: onClose, title: title, children: [_jsxs("div", { className: "ai-image-modal__content", children: [showStyleSelector && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_jsx("div", { style: { fontWeight: 500, flexGrow: 1 }, children: __('Generate image', 'jetpack-ai-client') }), _jsx("div", { children: _jsx(SelectControl, { __nextHasNoMarginBottom: true, value: style, options: styles, onChange: updateStyle }) })] })), _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 }) })] }), _jsx("div", { className: "ai-image-modal__footer", children: _jsx(AiModalFooter, {}) })] })) }));
+    return (_jsx(_Fragment, { children: open && (_jsxs(AiAssistantModal, { handleClose: onClose, title: title, children: [_jsxs("div", { className: "ai-image-modal__content", children: [showStyleSelector && (_jsxs("div", { style: { display: 'flex', alignItems: 'center', gap: 16 }, children: [_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 }) })] })), _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 }) })] }), _jsx("div", { className: "ai-image-modal__footer", children: _jsx(AiModalFooter, {}) })] })) }));
 }

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

@@ -3,35 +3,29 @@
  */
 import { PLAN_TYPE_FREE, usePlanType as getPlanType, } from '@automattic/jetpack-shared-extension-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 /**
  * Hook to get properties for AiFeature
  * @return {object} - Object containing properties for AiFeature.
  */
 export default function useAiFeature() {
-    const { data, loading, requestsLimit, requestsCount } = useSelect(select => {
-        const { getAiAssistantFeature, getIsRequestingAiAssistantFeature } = select('wordpress-com/plans');
-        const featureData = getAiAssistantFeature();
-        const { currentTier, usagePeriod, requestsCount: allTimeRequestsCount, requestsLimit: freeRequestsLimit, } = featureData;
-        const planType = getPlanType(currentTier);
-        const currentTierLimit = currentTier?.limit || freeRequestsLimit;
-        const actualRequestsCount = planType === PLAN_TYPE_FREE ? allTimeRequestsCount : usagePeriod?.requestsCount;
-        const actualRequestsLimit = planType === PLAN_TYPE_FREE ? freeRequestsLimit : currentTierLimit;
+    const data = useSelect(select => select('wordpress-com/plans').getAiAssistantFeature(), []);
+    const loading = useSelect(select => select('wordpress-com/plans').getIsRequestingAiAssistantFeature(), []);
+    const { fetchAiAssistantFeature: loadFeatures, increaseAiAssistantRequestsCount: increaseRequestsCount, dequeueAiAssistantFeatureAsyncRequest: dequeueAsyncRequest, } = useDispatch('wordpress-com/plans');
+    return useMemo(() => {
+        const planType = getPlanType(data?.currentTier);
+        const currentTierLimit = data?.currentTier?.limit || data?.requestsLimit;
+        const requestsCount = planType === PLAN_TYPE_FREE ? data?.requestsCount : data?.usagePeriod?.requestsCount;
+        const requestsLimit = planType === PLAN_TYPE_FREE ? data?.requestsLimit : currentTierLimit;
         return {
-            data: featureData,
-            loading: getIsRequestingAiAssistantFeature(),
-            requestsCount: actualRequestsCount,
-            requestsLimit: actualRequestsLimit,
+            ...data,
+            requestsCount,
+            requestsLimit,
+            loading,
+            error: null,
+            refresh: loadFeatures,
+            increaseRequestsCount,
+            dequeueAsyncRequest,
         };
-    }, []);
-    const { fetchAiAssistantFeature: loadFeatures, increaseAiAssistantRequestsCount: increaseRequestsCount, dequeueAiAssistantFeatureAsyncRequest: dequeueAsyncRequest, } = useDispatch('wordpress-com/plans');
-    return {
-        ...data,
-        requestsCount,
-        requestsLimit,
-        loading,
-        error: null,
-        refresh: loadFeatures,
-        increaseRequestsCount,
-        dequeueAsyncRequest,
-    };
+    }, [data, loading, loadFeatures, increaseRequestsCount, dequeueAsyncRequest]);
 }

package/build/logo-generator/components/prompt.js

@@ -154,7 +154,7 @@ export const Prompt = ({ initialPrompt = '' }) => {
         setStyle(imageStyle);
         recordTracksEvent(EVENT_SWITCH_STYLE, { context, style: imageStyle });
     }, [context, setStyle, recordTracksEvent]);
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && (_jsx(SelectControl, { __nextHasNoMarginBottom: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, actionDisabled: isBusy || requireUpgrade || !hasPrompt, placeholder: __('Describe your site or simply ask for a logo specifying some details about it', 'jetpack-ai-client') }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && (_jsx(SelectControl, { __nextHasNoMarginBottom: true, __next40pxDefaultSize: true, value: style, options: styles, onChange: updateStyle, disabled: isBusy || requireUpgrade }))] }), _jsx(AiModalPromptInput, { prompt: prompt, setPrompt: setPrompt, generateHandler: onGenerate, disabled: isBusy || requireUpgrade, actionDisabled: isBusy || requireUpgrade || !hasPrompt, placeholder: __('Describe your site or simply ask for a logo specifying some details about it', 'jetpack-ai-client') }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
                                 // translators: %u is the number of requests
                                 __('%u requests remaining.', 'jetpack-ai-client'), requestsRemaining) }), hasNextTier && (_jsxs(_Fragment, { children: ["\u00A0", _jsx(Button, { variant: "link", href: checkoutUrl, target: "_blank", onClick: onUpgradeClick, children: __('Upgrade', 'jetpack-ai-client') })] })), "\u00A0", _jsx(Tooltip, { text: __('Logo generation costs 10 requests; prompt enhancement costs 1 request each', 'jetpack-ai-client'), placement: "bottom", children: _jsx(Icon, { className: "prompt-footer__icon", icon: info }) })] })), requireUpgrade && tierPlansEnabled && _jsx(UpgradeNudge, {}), requireUpgrade && !tierPlansEnabled && _jsx(FairUsageNotice, {}), enhancePromptFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error enhancing prompt. Please try again.', 'jetpack-ai-client') })), logoFetchError && (_jsx("div", { className: "jetpack-ai-logo-generator__prompt-error", children: __('Error generating logo. Please try again.', 'jetpack-ai-client') }))] })] }));
 };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.27.4",
+	"version": "0.27.6",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -45,9 +45,9 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.44",
-		"@automattic/jetpack-components": "^0.69.1",
-		"@automattic/jetpack-connection": "^0.39.3",
-		"@automattic/jetpack-shared-extension-utils": "^0.18.3",
+		"@automattic/jetpack-components": "^0.72.0",
+		"@automattic/jetpack-connection": "^0.39.7",
+		"@automattic/jetpack-shared-extension-utils": "^0.18.8",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/jest": "29.5.14",
 		"@types/react": "18.3.18",

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Button, ButtonGroup } from '@wordpress/components';
+import { Button, Flex } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
 import { useImperativeHandle, useRef, useEffect, useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -224,7 +224,7 @@ export function BlockAIControl(
 			{ showAccept && ! editRequest && (
 				<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
 					{ ( value?.length > 0 || lastValue === null ) && (
-						<ButtonGroup>
+						<Flex gap={ 1 } role="group" className="jetpack-components-ai-control__button-group">
 							<Button
 								className="jetpack-components-ai-control__controls-prompt_button"
 								label={ __( 'Discard', 'jetpack-ai-client' ) }
@@ -242,7 +242,7 @@ export function BlockAIControl(
 							>
 								<Icon icon={ regenerate } />
 							</Button>
-						</ButtonGroup>
+						</Flex>
 					) }
 					<Button
 						className="jetpack-components-ai-control__controls-prompt_button"

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

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { Button, ButtonGroup } from '@wordpress/components';
+import { Button, Flex } from '@wordpress/components';
 import { useKeyboardShortcut } from '@wordpress/compose';
 import { useImperativeHandle, useRef, useEffect, useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
@@ -190,7 +190,7 @@ export function ExtensionAIControl(
 					) }
 					{ isDone && (
 						<div className="jetpack-components-ai-control__controls-prompt_button_wrapper">
-							<ButtonGroup>
+							<Flex gap={ 1 } role="group" className="jetpack-components-ai-control__button-group">
 								<Button
 									className="jetpack-components-ai-control__controls-prompt_button"
 									label={ __( 'Undo', 'jetpack-ai-client' ) }
@@ -207,7 +207,7 @@ export function ExtensionAIControl(
 								>
 									{ __( 'Close', 'jetpack-ai-client' ) }
 								</Button>
-							</ButtonGroup>
+							</Flex>
 						</div>
 					) }
 				</>

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

@@ -185,6 +185,7 @@ export default function AiImageModal( {
 								<div>
 									<SelectControl
 										__nextHasNoMarginBottom
+										__next40pxDefaultSize={ true }
 										value={ style }
 										options={ styles }
 										onChange={ updateStyle }

package/src/hooks/use-ai-feature/index.ts

@@ -6,6 +6,7 @@ import {
 	usePlanType as getPlanType,
 } from '@automattic/jetpack-shared-extension-utils';
 import { useDispatch, useSelect } from '@wordpress/data';
+import { useMemo } from '@wordpress/element';
 import type { WordPressPlansSelectors } from '@automattic/jetpack-shared-extension-utils/store/wordpress-com';
 
 /**
@@ -13,35 +14,19 @@ import type { WordPressPlansSelectors } from '@automattic/jetpack-shared-extensi
  * @return {object} - Object containing properties for AiFeature.
  */
 export default function useAiFeature() {
-	const { data, loading, requestsLimit, requestsCount } = useSelect( select => {
-		const { getAiAssistantFeature, getIsRequestingAiAssistantFeature } = select(
-			'wordpress-com/plans'
-		) as WordPressPlansSelectors;
-
-		const featureData = getAiAssistantFeature();
-
-		const {
-			currentTier,
-			usagePeriod,
-			requestsCount: allTimeRequestsCount,
-			requestsLimit: freeRequestsLimit,
-		} = featureData;
-
-		const planType = getPlanType( currentTier );
-
-		const currentTierLimit = currentTier?.limit || freeRequestsLimit;
-
-		const actualRequestsCount =
-			planType === PLAN_TYPE_FREE ? allTimeRequestsCount : usagePeriod?.requestsCount;
-		const actualRequestsLimit = planType === PLAN_TYPE_FREE ? freeRequestsLimit : currentTierLimit;
-
-		return {
-			data: featureData,
-			loading: getIsRequestingAiAssistantFeature(),
-			requestsCount: actualRequestsCount,
-			requestsLimit: actualRequestsLimit,
-		};
-	}, [] );
+	const data = useSelect(
+		select =>
+			( select( 'wordpress-com/plans' ) as WordPressPlansSelectors ).getAiAssistantFeature(),
+		[]
+	);
+
+	const loading = useSelect(
+		select =>
+			(
+				select( 'wordpress-com/plans' ) as WordPressPlansSelectors
+			 ).getIsRequestingAiAssistantFeature(),
+		[]
+	);
 
 	const {
 		fetchAiAssistantFeature: loadFeatures,
@@ -49,14 +34,24 @@ export default function useAiFeature() {
 		dequeueAiAssistantFeatureAsyncRequest: dequeueAsyncRequest,
 	} = useDispatch( 'wordpress-com/plans' );
 
-	return {
-		...data,
-		requestsCount,
-		requestsLimit,
-		loading,
-		error: null, // @todo: handle error at store level
-		refresh: loadFeatures,
-		increaseRequestsCount,
-		dequeueAsyncRequest,
-	};
+	return useMemo( () => {
+		const planType = getPlanType( data?.currentTier );
+		const currentTierLimit = data?.currentTier?.limit || data?.requestsLimit;
+
+		const requestsCount =
+			planType === PLAN_TYPE_FREE ? data?.requestsCount : data?.usagePeriod?.requestsCount;
+
+		const requestsLimit = planType === PLAN_TYPE_FREE ? data?.requestsLimit : currentTierLimit;
+
+		return {
+			...data,
+			requestsCount,
+			requestsLimit,
+			loading,
+			error: null, // @todo: handle error at store level
+			refresh: loadFeatures,
+			increaseRequestsCount,
+			dequeueAsyncRequest,
+		};
+	}, [ data, loading, loadFeatures, increaseRequestsCount, dequeueAsyncRequest ] );
 }

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

@@ -268,6 +268,7 @@ export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 				{ showStyleSelector && (
 					<SelectControl
 						__nextHasNoMarginBottom
+						__next40pxDefaultSize={ true }
 						value={ style }
 						options={ styles }
 						onChange={ updateStyle }