@automattic/jetpack-ai-client 0.32.1 → 0.33.1

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

@@ -6,7 +6,7 @@ import './style.scss';
  * Types
  */
 import type { SuggestionErrorCode } from '../../types.ts';
-import type React from 'react';
+import type { MouseEvent, ReactElement, ReactNode } from 'react';
 export declare const MESSAGE_SEVERITY_WARNING = "warning";
 export declare const MESSAGE_SEVERITY_ERROR = "error";
 export declare const MESSAGE_SEVERITY_SUCCESS = "success";
@@ -20,15 +20,15 @@ type AiFeedbackThumbsOptions = {
     onRate?: (rating: string) => void;
 };
 export type MessageProps = {
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     severity?: MessageSeverityProp;
     aiFeedbackThumbsOptions?: AiFeedbackThumbsOptions;
-    children: React.ReactNode;
+    children: ReactNode;
 };
 export type GuidelineMessageProps = {
     aiFeedbackThumbsOptions?: AiFeedbackThumbsOptions;
 };
-export type OnUpgradeClick = (event?: React.MouseEvent<HTMLButtonElement>) => void;
+export type OnUpgradeClick = (event?: MouseEvent<HTMLButtonElement>) => void;
 export type UpgradeMessageProps = {
     requestsRemaining: number;
     severity?: MessageSeverityProp;
@@ -46,34 +46,34 @@ export type ErrorMessageProps = {
  * React component to render a block message.
  *
  * @param {MessageProps} props - Component props.
- * @return {React.ReactElement}    Banner component.
+ * @return {ReactElement}    Banner component.
  */
-export default function Message({ severity, icon, aiFeedbackThumbsOptions, children, }: MessageProps): React.ReactElement;
+export default function Message({ severity, icon, aiFeedbackThumbsOptions, children, }: MessageProps): ReactElement;
 /**
  * React component to render a guideline message.
  *
  * @param {GuidelineMessageProps} props - Component props.
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
-export declare function GuidelineMessage({ aiFeedbackThumbsOptions, }: GuidelineMessageProps): React.ReactElement;
+export declare function GuidelineMessage({ aiFeedbackThumbsOptions, }: GuidelineMessageProps): ReactElement;
 /**
  * React component to render a fair usage limit message.
  *
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
-export declare function FairUsageLimitMessage(): React.ReactElement;
+export declare function FairUsageLimitMessage(): ReactElement;
 /**
  * React component to render an upgrade message for free tier users
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
-export declare function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, upgradeUrl, }: UpgradeMessageProps): React.ReactElement;
+export declare function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, upgradeUrl, }: UpgradeMessageProps): ReactElement;
 /**
  * React component to render an error message
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
-export declare function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upgradeUrl, }: ErrorMessageProps): React.ReactElement;
+export declare function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upgradeUrl, }: ErrorMessageProps): ReactElement;
 export {};

package/build/components/message/index.js

@@ -28,7 +28,7 @@ const messageIconsMap = {
  * React component to render a block message.
  *
  * @param {MessageProps} props - Component props.
- * @return {React.ReactElement}    Banner component.
+ * @return {ReactElement}    Banner component.
  */
 export default function Message({ severity = MESSAGE_SEVERITY_INFO, icon = null, aiFeedbackThumbsOptions = {
     showAIFeedbackThumbs: false,
@@ -45,7 +45,7 @@ export default function Message({ severity = MESSAGE_SEVERITY_INFO, icon = null,
 /**
  * React component to render a learn more link.
  *
- * @return {React.ReactElement} - Learn more link component.
+ * @return {ReactElement} - Learn more link component.
  */
 function LearnMoreLink() {
     return (_jsx(ExternalLink, { href: "https://jetpack.com/redirect/?source=ai-guidelines", children: __('Learn more', 'jetpack-ai-client') }));
@@ -54,7 +54,7 @@ function LearnMoreLink() {
  * React component to render a guideline message.
  *
  * @param {GuidelineMessageProps} props - Component props.
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
 export function GuidelineMessage({ aiFeedbackThumbsOptions = {
     showAIFeedbackThumbs: false,
@@ -68,7 +68,7 @@ export function GuidelineMessage({ aiFeedbackThumbsOptions = {
 /**
  * React component to render a fair usage limit message.
  *
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
 export function FairUsageLimitMessage() {
     const message = __("You've reached this month's request limit, per our <link>fair usage policy</link>", 'jetpack-ai-client');
@@ -81,7 +81,7 @@ export function FairUsageLimitMessage() {
  * React component to render an upgrade message for free tier users
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
 export function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, upgradeUrl, }) {
     let messageSeverity = severity;
@@ -96,7 +96,7 @@ export function UpgradeMessage({ requestsRemaining, severity, onUpgradeClick, up
  * React component to render an error message
  *
  * @param {number} requestsRemaining - Number of requests remaining.
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
 export function ErrorMessage({ error, code, onTryAgainClick, onUpgradeClick, upgradeUrl, }) {
     const errorMessage = error || __('Something went wrong', 'jetpack-ai-client');

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

@@ -1,7 +1,8 @@
 import type { RequestingStateProp } from '../../types.ts';
 import './style.scss';
+import type { ReactNode } from 'react';
 type AiAssistantModalProps = {
-    children: React.ReactNode;
+    children: ReactNode;
     handleClose: () => void;
     hideHeader?: boolean;
     requestingState?: RequestingStateProp;
@@ -11,7 +12,7 @@ type AiAssistantModalProps = {
 /**
  * AiAssistantModal component
  * @param {AiAssistantModalProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function AiAssistantModal({ children, handleClose, hideHeader, requestingState, title, maxWidth, }: AiAssistantModalProps): import("react/jsx-runtime").JSX.Element;
 export {};

package/build/components/modal/index.js

@@ -1,13 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-/**
- * External dependencies
- */
 import { Modal, Button } from '@wordpress/components';
 import { __ } from '@wordpress/i18n';
 import { close } from '@wordpress/icons';
-/**
- * Internal dependencies
- */
 import AiStatusIndicator from "../ai-status-indicator/index.js";
 import './style.scss';
 const ModalHeader = ({ requestingState, onClose, title, }) => {
@@ -16,7 +10,7 @@ const ModalHeader = ({ requestingState, onClose, title, }) => {
 /**
  * AiAssistantModal component
  * @param {AiAssistantModalProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function AiAssistantModal({ children, handleClose, hideHeader = true, requestingState = 'init', title = __('AI Assistant', 'jetpack-ai-client'), maxWidth = 720, }) {
     return (_jsx(Modal, { __experimentalHideHeader: hideHeader, className: "ai-assistant-modal", shouldCloseOnClickOutside: false, onRequestClose: handleClose, children: _jsxs("div", { className: "ai-assistant-modal__content", style: { maxWidth }, children: [_jsx(ModalHeader, { requestingState: requestingState, onClose: handleClose, title: title }), _jsx("hr", { className: "ai-assistant-modal__divider" }), children] }) }));

package/build/data-flow/context.d.ts

@@ -1,7 +1,3 @@
-/**
- * External dependencies
- */
-import React from 'react';
 /**
  * Types & Constants
  */
@@ -9,6 +5,7 @@ import SuggestionsEventSource from '../suggestions-event-source/index.ts';
 import type { AskQuestionOptionsArgProps } from '../ask-question/index.ts';
 import type { RequestingErrorProps } from '../hooks/use-ai-suggestions/index.ts';
 import type { PromptProp, RequestingStateProp } from '../types.ts';
+import type { ReactElement } from 'react';
 export type AiDataContextProps = {
     suggestion: string;
     requestingError: RequestingErrorProps;
@@ -19,23 +16,23 @@ export type AiDataContextProps = {
 };
 type AiDataContextProviderProps = {
     value: AiDataContextProps;
-    children: React.ReactElement;
+    children: ReactElement;
 };
 /**
  * AI Data Context
  *
  * @return {AiDataContextProps} Context.
  */
-export declare const AiDataContext: React.Context<object | AiDataContextProps>;
+export declare const AiDataContext: import("react").Context<object | AiDataContextProps>;
 /**
  * AI Data Context Provider
  *
  * @param {AiDataContextProviderProps} props - Component props.
- * @return {React.ReactElement}                           Context provider.
+ * @return {ReactElement}                           Context provider.
  * @example
  * <AiDataContextProvider value={ value }>
  * 	{ children }
  * </AiDataContextProvider>
  */
-export declare const AiDataContextProvider: ({ value, children, }: AiDataContextProviderProps) => React.ReactElement;
+export declare const AiDataContextProvider: ({ value, children, }: AiDataContextProviderProps) => ReactElement;
 export {};

package/build/data-flow/context.js

@@ -13,7 +13,7 @@ export const AiDataContext = createContext({});
  * AI Data Context Provider
  *
  * @param {AiDataContextProviderProps} props - Component props.
- * @return {React.ReactElement}                           Context provider.
+ * @return {ReactElement}                           Context provider.
  * @example
  * <AiDataContextProvider value={ value }>
  * 	{ children }

package/build/data-flow/with-ai-assistant-data.d.ts

@@ -1,10 +1,10 @@
-import React from 'react';
+import type { ComponentType } from 'react';
 /**
  * High Order Component that provides the
  * AI Assistant Data context to the wrapped component.
  *
- * @param {React.ReactElement} WrappedComponent - component to wrap.
- * @return {React.ReactElement} Wrapped component, with the AI Assistant Data context.
+ * @param {ReactElement} WrappedComponent - component to wrap.
+ * @return {ReactElement} Wrapped component, with the AI Assistant Data context.
  */
-declare const withAiDataProvider: (Inner: React.ComponentType<{}>) => (props: any) => import("react/jsx-runtime").JSX.Element;
+declare const withAiDataProvider: (Inner: ComponentType) => (props: any) => import("react/jsx-runtime").JSX.Element;
 export default withAiDataProvider;

package/build/data-flow/with-ai-assistant-data.js

@@ -13,8 +13,8 @@ import { AiDataContextProvider } from "./index.js";
  * High Order Component that provides the
  * AI Assistant Data context to the wrapped component.
  *
- * @param {React.ReactElement} WrappedComponent - component to wrap.
- * @return {React.ReactElement} Wrapped component, with the AI Assistant Data context.
+ * @param {ReactElement} WrappedComponent - component to wrap.
+ * @return {ReactElement} Wrapped component, with the AI Assistant Data context.
  */
 const withAiDataProvider = createHigherOrderComponent((WrappedComponent) => {
     return props => {

package/build/jwt/index.js

@@ -39,7 +39,7 @@ export default async function requestJwt({ apiNonce, siteId, expirationTime, } =
     let data;
     const isSimple = isSimpleSite();
     if (!isSimple) {
-        data = await apiFetch({
+        data = (await apiFetch({
             /*
              * This endpoint is registered in the Jetpack plugin.
              * Provably we should move it to another package, but for now it's here.
@@ -51,13 +51,13 @@ export default async function requestJwt({ apiNonce, siteId, expirationTime, } =
                 'X-WP-Nonce': apiNonce,
             },
             method: 'POST',
-        });
+        }));
     }
     else {
-        data = await apiFetch({
+        data = (await apiFetch({
             path: '/wpcom/v2/sites/' + siteId + '/jetpack-openai-query/jwt',
             method: 'POST',
-        });
+        }));
     }
     const newTokenData = {
         token: data.token,

package/build/logo-generator/components/feature-fetch-failure-screen.d.ts

@@ -1,8 +1,8 @@
 /**
  * Types
  */
-import type React from 'react';
-export declare const FeatureFetchFailureScreen: React.FC<{
+import type { FC } from 'react';
+export declare const FeatureFetchFailureScreen: FC<{
     onCancel: () => void;
     onRetry?: () => void;
 }>;

package/build/logo-generator/components/first-load-screen.d.ts

@@ -1,5 +1,5 @@
-import React from 'react';
 import './first-load-screen.scss';
-export declare const FirstLoadScreen: React.FC<{
+import type { FC } from 'react';
+export declare const FirstLoadScreen: FC<{
     state?: 'loadingFeature' | 'analyzing' | 'generating';
 }>;

package/build/logo-generator/components/generator-modal.d.ts

@@ -3,5 +3,5 @@ import './generator-modal.scss';
  * Types
  */
 import type { GeneratorModalProps } from '../types.ts';
-import type React from 'react';
-export declare const GeneratorModal: React.FC<GeneratorModalProps>;
+import type { FC } from 'react';
+export declare const GeneratorModal: FC<GeneratorModalProps>;

package/build/logo-generator/components/history-carousel.d.ts

@@ -2,5 +2,5 @@ import './history-carousel.scss';
 /**
  * Types
  */
-import type React from 'react';
-export declare const HistoryCarousel: React.FC;
+import type { FC } from 'react';
+export declare const HistoryCarousel: FC;

package/build/logo-generator/components/image-loader.d.ts

@@ -1,7 +1,7 @@
 /**
  * Types
  */
-import type React from 'react';
-export declare const ImageLoader: React.FC<{
+import type { FC } from 'react';
+export declare const ImageLoader: FC<{
     className?: string;
 }>;

package/build/logo-generator/components/logo-presenter.d.ts

@@ -1,4 +1,4 @@
 import './logo-presenter.scss';
 import type { LogoPresenterProps } from '../types.ts';
-import type React from 'react';
-export declare const LogoPresenter: React.FC<LogoPresenterProps>;
+import type { FC } from 'react';
+export declare const LogoPresenter: FC<LogoPresenterProps>;

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

@@ -56,7 +56,7 @@ const SaveInLibraryButton = ({ siteId }) => {
     const savedLabel = __('Saved', 'jetpack-ai-client');
     return !saving && !saved ? (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", onClick: handleClick, children: [_jsx(Icon, { icon: _jsx(MediaIcon, {}) }), _jsx("span", { className: "action-text", children: __('Save in Library', 'jetpack-ai-client') })] })) : (_jsxs(Button, { className: "jetpack-ai-logo-generator-modal-presenter__action", children: [_jsx(Icon, { icon: saving ? _jsx(MediaIcon, {}) : _jsx(CheckIcon, {}) }), _jsx("span", { className: "action-text", children: saving ? savingLabel : savedLabel })] }));
 };
-const UseOnSiteButton = ({ onApplyLogo, }) => {
+const UseOnSiteButton = ({ onApplyLogo }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
     const { isSavingLogoToLibrary, selectedLogo, logos, selectedLogoIndex, context } = useLogoGenerator();

package/build/logo-generator/components/upgrade-screen.d.ts

@@ -1,8 +1,8 @@
 /**
  * Types
  */
-import type React from 'react';
-export declare const UpgradeScreen: React.FC<{
+import type { FC } from 'react';
+export declare const UpgradeScreen: FC<{
     onCancel: () => void;
     upgradeURL: string;
     reason: 'feature' | 'requests';

package/build/logo-generator/components/visit-site-banner.d.ts

@@ -2,8 +2,8 @@ import './visit-site-banner.scss';
 /**
  * Types
  */
-import type React from 'react';
-export declare const VisitSiteBanner: React.FC<{
+import type { FC } from 'react';
+export declare const VisitSiteBanner: FC<{
     className?: string;
     onVisitBlankTarget?: () => void;
 }>;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.32.1",
+	"version": "0.33.1",
 	"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,30 +45,30 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^1.0.1",
-		"@automattic/jetpack-components": "^1.1.6",
-		"@automattic/jetpack-connection": "^1.2.6",
+		"@automattic/jetpack-base-styles": "^1.0.3",
+		"@automattic/jetpack-components": "^1.1.10",
+		"@automattic/jetpack-connection": "^1.2.10",
 		"@automattic/jetpack-script-data": "^0.4.4",
 		"@automattic/jetpack-explat": "workspace:*",
-		"@automattic/jetpack-shared-extension-utils": "^1.2.1",
+		"@automattic/jetpack-shared-extension-utils": "^1.3.0",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/jest": "30.0.0",
 		"@types/react": "18.3.23",
 		"@types/wordpress__block-editor": "11.5.16",
-		"@wordpress/api-fetch": "7.25.0",
-		"@wordpress/base-styles": "6.1.0",
-		"@wordpress/blob": "4.25.0",
-		"@wordpress/block-editor": "14.20.0",
-		"@wordpress/blocks": "14.14.0",
-		"@wordpress/components": "29.11.0",
-		"@wordpress/compose": "7.25.0",
-		"@wordpress/data": "10.25.0",
-		"@wordpress/editor": "14.25.0",
-		"@wordpress/element": "6.25.0",
-		"@wordpress/i18n": "5.25.0",
-		"@wordpress/icons": "10.25.0",
-		"@wordpress/primitives": "4.25.0",
-		"@wordpress/url": "4.25.0",
+		"@wordpress/api-fetch": "7.26.0",
+		"@wordpress/base-styles": "6.2.0",
+		"@wordpress/blob": "4.26.0",
+		"@wordpress/block-editor": "14.21.0",
+		"@wordpress/blocks": "14.15.0",
+		"@wordpress/components": "29.12.0",
+		"@wordpress/compose": "7.26.0",
+		"@wordpress/data": "10.26.0",
+		"@wordpress/editor": "14.26.0",
+		"@wordpress/element": "6.26.0",
+		"@wordpress/i18n": "5.26.0",
+		"@wordpress/icons": "10.26.0",
+		"@wordpress/primitives": "4.26.0",
+		"@wordpress/url": "4.26.0",
 		"clsx": "2.1.1",
 		"debug": "4.4.1",
 		"markdown-it": "14.1.0",

package/src/api-fetch/index.ts

@@ -2,6 +2,10 @@
  * External dependencies
  */
 import apiFetchMod from '@wordpress/api-fetch';
+/**
+ * Types
+ */
+import type { APIFetchOptions } from '@wordpress/api-fetch';
 
 // @wordpress/api-fetch (as of 6.47.0) declares itself in such a way that tsc and node see the function at apiFetchMod.default
 // while some other environments (including code running inside WordPress itself) see it at apiFetch.
@@ -11,4 +15,10 @@ const apiFetch = 'default' in apiFetchMod ? apiFetchMod.default : apiFetchMod;
 // eslint-disable-next-line @typescript-eslint/no-unsafe-function-type
 type ApiFetchType = typeof apiFetch extends Function ? typeof apiFetch : typeof apiFetchMod;
 
-export default apiFetch as ApiFetchType;
+type AugmentedAPIFetchOptions = APIFetchOptions & {
+	global?: boolean;
+};
+
+type AugmentedApiFetchType = ( options: AugmentedAPIFetchOptions ) => ReturnType< ApiFetchType >;
+
+export default apiFetch as AugmentedApiFetchType;

package/src/chrome-ai/get-availability.ts

@@ -1,11 +1,14 @@
 /**
  * External dependencies
  */
-import { initializeExPlat, loadExperimentAssignmentWithAuth } from '@automattic/jetpack-explat';
+import { initializeExPlat, createExPlatClient } from '@automattic/jetpack-explat';
 import { select } from '@wordpress/data';
+import { addQueryArgs } from '@wordpress/url';
 import debugFactory from 'debug';
-
-const debug = debugFactory( 'ai-client:chrome-ai-availability' );
+/**
+ * Internal dependencies
+ */
+import apiFetch from '../api-fetch/index.ts';
 
 /**
  * Types
@@ -21,6 +24,8 @@ type PlansSelect = {
 	};
 };
 
+const debug = debugFactory( 'ai-client:chrome-ai-availability' );
+
 /**
  * Get the AI Assistant feature.
  *
@@ -31,6 +36,40 @@ function getAiAssistantFeature() {
 	return getFeature();
 }
 
+/**
+ * Fetch an experiment assignment.
+ *
+ * @param {boolean} asConnectedUser - Whether the user is connected.
+ * @return {Function} A function that fetches an experiment assignment.
+ */
+const fetchExperimentAssignmentWithConnectedUser = async ( {
+	experimentName,
+}: {
+	experimentName: string;
+} ): Promise< unknown > => {
+	const params = {
+		experiment_name: experimentName,
+		anon_id: undefined,
+		as_connected_user: true,
+	};
+
+	debug( 'params', params );
+
+	const assignmentsRequestUrl = addQueryArgs(
+		'https://public-api.wordpress.com/wpcom/v2/experiments/0.1.0/assignments/jetpack',
+		params
+	);
+
+	debug( 'assignmentsRequestUrl', assignmentsRequestUrl );
+
+	return apiFetch( {
+		url: assignmentsRequestUrl,
+		credentials: 'include',
+		mode: 'cors',
+		global: true,
+	} );
+};
+
 /**
  * Check if Chrome AI can be enabled.
  *
@@ -46,10 +85,16 @@ export async function isChromeAIAvailable() {
 	}
 
 	initializeExPlat();
-	debug( 'initialized explat' );
+
+	const { loadExperimentAssignment: loadExperimentAssignmentWithAuth } = createExPlatClient( {
+		fetchExperimentAssignment: fetchExperimentAssignmentWithConnectedUser,
+		getAnonId: async () => null,
+		logError: debug,
+		isDevelopmentMode: false,
+	} );
 
 	const { variationName } = await loadExperimentAssignmentWithAuth(
-		'calypso_jetpack_ai_gemini_api_202503_v1'
+		'calypso_jetpack_ai_gemini_api_202503_v2'
 	);
 
 	debug( 'variationName', variationName );

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

@@ -3,7 +3,6 @@
  */
 import { PlainText } from '@wordpress/block-editor';
 import clsx from 'clsx';
-import React from 'react';
 /**
  * Internal dependencies
  */
@@ -13,7 +12,7 @@ import './style.scss';
  * Types
  */
 import type { RequestingStateProp } from '../../types.ts';
-import type { ReactElement } from 'react';
+import type { MutableRefObject, ReactElement } from 'react';
 
 type AIControlProps = {
 	className?: string;
@@ -28,7 +27,7 @@ type AIControlProps = {
 	actions?: ReactElement;
 	message?: ReactElement;
 	promptUserInputRef?: PlainText.Props[ 'ref' ];
-	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
+	wrapperRef?: MutableRefObject< HTMLDivElement | null >;
 };
 
 /**

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

@@ -14,7 +14,7 @@ import {
 	reusableBlock as regenerate,
 } from '@wordpress/icons';
 import debugFactory from 'debug';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 /**
  * Internal dependencies
  */
@@ -25,7 +25,7 @@ import './style.scss';
  * Types
  */
 import type { RequestingStateProp } from '../../types.ts';
-import type { ReactElement } from 'react';
+import type { MutableRefObject, ReactElement } from 'react';
 
 type BlockAIControlProps = {
 	disabled?: boolean;
@@ -54,8 +54,8 @@ const debug = debugFactory( 'jetpack-ai-client:block-ai-control' );
 /**
  * BlockAIControl component. Used by the AI Assistant block, adding logic and components to the base AIControl component.
  *
- * @param {BlockAIControlProps}    props - Component props
- * @param {React.MutableRefObject} ref   - Ref to the component
+ * @param {BlockAIControlProps} props - Component props
+ * @param {MutableRefObject}    ref   - Ref to the component
  * @return {ReactElement}             Rendered component
  */
 export function BlockAIControl(
@@ -80,7 +80,7 @@ export function BlockAIControl(
 		error = null,
 		lastAction,
 	}: BlockAIControlProps,
-	ref: React.MutableRefObject< HTMLInputElement >
+	ref: MutableRefObject< HTMLInputElement >
 ): ReactElement {
 	const loading = state === 'requesting' || state === 'suggesting';
 	const [ editRequest, setEditRequest ] = useState( false );

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

@@ -6,7 +6,7 @@ import { useKeyboardShortcut } from '@wordpress/compose';
 import { useImperativeHandle, useRef, useEffect, useCallback, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall, arrowUp, undo } from '@wordpress/icons';
-import React, { forwardRef } from 'react';
+import { forwardRef } from 'react';
 /**
  * Internal dependencies
  */
@@ -22,7 +22,7 @@ import './style.scss';
  * Types
  */
 import type { RequestingErrorProps, RequestingStateProp } from '../../types.ts';
-import type { ReactElement, MouseEvent } from 'react';
+import type { MutableRefObject, ReactElement, MouseEvent } from 'react';
 
 type ExtensionAIControlProps = {
 	className?: string;
@@ -38,7 +38,7 @@ type ExtensionAIControlProps = {
 	showUpgradeMessage?: boolean;
 	showFairUsageMessage?: boolean;
 	upgradeUrl?: string;
-	wrapperRef?: React.MutableRefObject< HTMLDivElement | null >;
+	wrapperRef?: MutableRefObject< HTMLDivElement | null >;
 	onChange?: ( newValue: string ) => void;
 	onSend?: ( currentValue: string ) => void;
 	onStop?: () => void;
@@ -54,7 +54,7 @@ type ExtensionAIControlProps = {
  * ExtensionAIControl component. Used by the AI Assistant inline extensions, adding logic and components to the base AIControl component.
  *
  * @param {ExtensionAIControlProps} props - Component props
- * @param {React.MutableRefObject}  ref   - Ref to the component
+ * @param {MutableRefObject}        ref   - Ref to the component
  * @return {ReactElement}                 Rendered component
  */
 export function ExtensionAIControl(
@@ -83,7 +83,7 @@ export function ExtensionAIControl(
 		lastAction,
 		blockType,
 	}: ExtensionAIControlProps,
-	ref: React.MutableRefObject< HTMLInputElement >
+	ref: MutableRefObject< HTMLInputElement >
 ): ReactElement {
 	const loading = state === 'requesting' || state === 'suggesting';
 	const [ editRequest, setEditRequest ] = useState( false );