@automattic/jetpack-ai-client 0.33.0 → 0.33.2

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

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import {
 	useAnalytics,
 	PLAN_TYPE_UNLIMITED,
@@ -12,9 +9,6 @@ import { store as editorStore } from '@wordpress/editor';
 import { useCallback, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import debugFactory from 'debug';
-/**
- * Internal dependencies
- */
 import './style.scss';
 import { PLACEMENT_JETPACK_SIDEBAR, PLACEMENT_DOCUMENT_SETTINGS } from '../../constants.ts';
 import useAiFeature from '../../hooks/use-ai-feature/index.ts';
@@ -32,6 +26,7 @@ import {
 } from './types.ts';
 import type { ImageResponse } from './hooks/use-ai-image.ts';
 import type { EditorSelectors } from './types.ts';
+import type { ReactElement } from 'react';
 
 const debug = debugFactory( 'jetpack-ai-client:featured-image' );
 
@@ -45,7 +40,7 @@ type FeaturedImageProps = {
 /**
  * FeaturedImage component
  * @param {FeaturedImageProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function FeaturedImage( {
 	busy,

package/src/components/ai-image/general-purpose-image.tsx

@@ -1,6 +1,3 @@
-/**
- * External dependencies
- */
 import {
 	useAnalytics,
 	PLAN_TYPE_UNLIMITED,
@@ -10,9 +7,6 @@ import { Button } from '@wordpress/components';
 import { useCallback, useState } from '@wordpress/element';
 import { __, sprintf } from '@wordpress/i18n';
 import debugFactory from 'debug';
-/**
- * Internal dependencies
- */
 import './style.scss';
 import useAiFeature from '../../hooks/use-ai-feature/index.ts';
 import usePostContent from '../../hooks/use-post-content.ts';
@@ -25,6 +19,7 @@ import {
 	IMAGE_GENERATION_MODEL_DALL_E_3,
 	GENERAL_IMAGE_FEATURE_NAME,
 } from './types.ts';
+import type { ReactElement } from 'react';
 
 /**
  * The type for the callback function that is called when the user selects an image.
@@ -45,7 +40,7 @@ const debug = debugFactory( 'jetpack-ai:general-purpose-image' );
 /**
  * GeneralPurposeImage component
  * @param {GeneralPurposeImageProps} props - The component properties.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function GeneralPurposeImage( {
 	placement,

package/src/components/ai-image/hooks/use-ai-image.ts

@@ -5,7 +5,6 @@ import { useDispatch, useSelect } from '@wordpress/data';
 import { useCallback, useEffect, useRef, useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
 import { cleanForSlug } from '@wordpress/url';
-import React from 'react';
 /**
  * Internal dependencies
  */
@@ -25,6 +24,7 @@ import {
 import type { RoleType } from '../../../types.ts';
 import type { CarrouselImageData, CarrouselImages } from '../components/carrousel.tsx';
 import type { FeatureControl } from '@automattic/jetpack-shared-extension-utils/store/wordpress-com/types';
+import type { RefObject } from 'react';
 
 type ImageFeatureControl = FeatureControl & {
 	styles: Array< ImageStyleObject > | [];
@@ -69,7 +69,7 @@ type UseAiImageReturn = {
 	currentImage: CarrouselImageData;
 	currentPointer: CarrouselImageData;
 	images: CarrouselImages;
-	pointer: React.RefObject< number >;
+	pointer: RefObject< number >;
 	imageStyles: Array< ImageStyleObject >;
 	guessStyle: GuessStyleFunction;
 };

package/src/components/ai-modal-footer/index.tsx

@@ -12,7 +12,7 @@ import './style.scss';
 /**
  * Types
  */
-import type React from 'react';
+import type { ReactElement } from 'react';
 
 type AiModalFooterProps = {
 	onGuidelinesClick?: () => void;
@@ -23,12 +23,12 @@ type AiModalFooterProps = {
  * AiModalFooter component.
  *
  * @param {AiModalFooterProps} props - component props.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
 export default function AiModalFooter( {
 	onGuidelinesClick,
 	onFeedbackClick,
-}: AiModalFooterProps ): React.ReactElement {
+}: AiModalFooterProps ): ReactElement {
 	const handleGuidelinesClick = useCallback( () => {
 		onGuidelinesClick?.();
 	}, [ onGuidelinesClick ] );

package/src/components/ai-status-indicator/index.tsx

@@ -8,7 +8,7 @@ import clsx from 'clsx';
  */
 import type { RequestingStateProp } from '../../types.ts';
 export type AiStatusIndicatorIconSize = 24 | 32 | 48 | 64;
-import type React from 'react';
+import type { ReactElement } from 'react';
 
 import './style.scss';
 
@@ -21,9 +21,9 @@ export type AiStatusIndicatorProps = {
  * AiStatusIndicator component.
  *
  * @param {AiStatusIndicatorProps} props - component props.
- * @return {React.ReactElement} - rendered component.
+ * @return {ReactElement} - rendered component.
  */
-export default function AiStatusIndicator( { state }: AiStatusIndicatorProps ): React.ReactElement {
+export default function AiStatusIndicator( { state }: AiStatusIndicatorProps ): ReactElement {
 	return (
 		<div
 			className={ clsx( 'jetpack-ai-status-indicator__icon-wrapper', {

package/src/components/audio-duration-display/index.tsx

@@ -5,7 +5,7 @@ import { formatTime } from './lib/media.ts';
 /*
  * Types
  */
-import type React from 'react';
+import type { ReactElement } from 'react';
 
 type AudioDurationDisplayProps = {
 	duration: number;
@@ -16,11 +16,11 @@ type AudioDurationDisplayProps = {
  * AudioDurationDisplay component.
  *
  * @param {AudioDurationDisplayProps} props - Component props.
- * @return {React.ReactElement}              Rendered component.
+ * @return {ReactElement}              Rendered component.
  */
 export default function AudioDurationDisplay( {
 	duration,
 	className,
-}: AudioDurationDisplayProps ): React.ReactElement {
+}: AudioDurationDisplayProps ): ReactElement {
 	return <span className={ className }>{ formatTime( duration, { addDecimalPart: false } ) }</span>;
 }

package/src/components/message/index.tsx

@@ -17,7 +17,7 @@ import AiFeedbackThumbs from '../ai-feedback/index.tsx';
  * Types
  */
 import type { SuggestionErrorCode } from '../../types.ts';
-import type React from 'react';
+import type { MouseEvent, ReactElement, ReactNode } from 'react';
 
 export const MESSAGE_SEVERITY_WARNING = 'warning';
 export const MESSAGE_SEVERITY_ERROR = 'error';
@@ -40,17 +40,17 @@ type AiFeedbackThumbsOptions = {
 };
 
 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;
@@ -78,7 +78,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,
@@ -91,7 +91,7 @@ export default function Message( {
 		onRate: () => {},
 	},
 	children,
-}: MessageProps ): React.ReactElement {
+}: MessageProps ): ReactElement {
 	return (
 		<div
 			className={ clsx(
@@ -122,9 +122,9 @@ export default function Message( {
 /**
  * React component to render a learn more link.
  *
- * @return {React.ReactElement} - Learn more link component.
+ * @return {ReactElement} - Learn more link component.
  */
-function LearnMoreLink(): React.ReactElement {
+function LearnMoreLink(): ReactElement {
 	return (
 		<ExternalLink href="https://jetpack.com/redirect/?source=ai-guidelines">
 			{ __( 'Learn more', 'jetpack-ai-client' ) }
@@ -136,7 +136,7 @@ function LearnMoreLink(): React.ReactElement {
  * 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 = {
@@ -146,7 +146,7 @@ export function GuidelineMessage( {
 		block: null,
 		onRate: () => {},
 	},
-}: GuidelineMessageProps ): React.ReactElement {
+}: GuidelineMessageProps ): ReactElement {
 	return (
 		<Message aiFeedbackThumbsOptions={ aiFeedbackThumbsOptions }>
 			<span>
@@ -160,9 +160,9 @@ export function GuidelineMessage( {
 /**
  * React component to render a fair usage limit message.
  *
- * @return {React.ReactElement} - Message component.
+ * @return {ReactElement} - Message component.
  */
-export function FairUsageLimitMessage(): React.ReactElement {
+export function FairUsageLimitMessage(): ReactElement {
 	const message = __(
 		"You've reached this month's request limit, per our <link>fair usage policy</link>",
 		'jetpack-ai-client'
@@ -180,14 +180,14 @@ export function FairUsageLimitMessage(): React.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 function UpgradeMessage( {
 	requestsRemaining,
 	severity,
 	onUpgradeClick,
 	upgradeUrl,
-}: UpgradeMessageProps ): React.ReactElement {
+}: UpgradeMessageProps ): ReactElement {
 	let messageSeverity = severity;
 
 	if ( messageSeverity == null ) {
@@ -219,7 +219,7 @@ export function UpgradeMessage( {
  * 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,
@@ -227,7 +227,7 @@ export function ErrorMessage( {
 	onTryAgainClick,
 	onUpgradeClick,
 	upgradeUrl,
-}: ErrorMessageProps ): React.ReactElement {
+}: ErrorMessageProps ): ReactElement {
 	const errorMessage = error || __( 'Something went wrong', 'jetpack-ai-client' );
 
 	return (

package/src/components/modal/index.tsx

@@ -1,15 +1,10 @@
-/**
- * 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.tsx';
 import type { RequestingStateProp } from '../../types.ts';
 import './style.scss';
+import type { ReactElement, ReactNode } from 'react';
 
 const ModalHeader = ( {
 	requestingState,
@@ -32,7 +27,7 @@ const ModalHeader = ( {
 };
 
 type AiAssistantModalProps = {
-	children: React.ReactNode;
+	children: ReactNode;
 	handleClose: () => void;
 	hideHeader?: boolean;
 	requestingState?: RequestingStateProp;
@@ -43,7 +38,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,

package/src/data-flow/Readme.md

@@ -59,7 +59,7 @@ Use the Provider in your component's render method to wrap the children componen
 You can access the context values in your child components using the `useContext` hook:
 
 ```javascript
-const aiContext = React.useContext( AiDataContext );
+const aiContext = useContext( AiDataContext );
 ```
 
 ### Context Values
@@ -129,4 +129,4 @@ An array of block names (e.g., `[ 'core/paragraph', 'core/image' ]`) to which th
 
 When a block type matches one of the specified names in `options.blocks`, the returned component will be wrapped with the AI Assistant Data context, providing all the available data and functionalities. The original component will be returned without any modifications for other block types.
 
-_Before using this function, ensure the AI Assistant Data is available in the higher component hierarchy. The [Ai Data Context](#ai-assistant-content) should typically wrap the top-level component or application._
+_Before using this function, ensure the AI Assistant Data is available in the higher component hierarchy. The [Ai Data Context](#ai-assistant-content) should typically wrap the top-level component or application._

package/src/data-flow/context.tsx

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import React, { createContext } from 'react';
+import { createContext } from 'react';
 /**
  * Types & Constants
  */
@@ -9,6 +9,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 = {
 	/*
@@ -51,7 +52,7 @@ type AiDataContextProviderProps = {
 	/*
 	 * Children
 	 */
-	children: React.ReactElement;
+	children: ReactElement;
 };
 
 /**
@@ -65,7 +66,7 @@ export const AiDataContext = createContext< AiDataContextProps | object >( {} );
  * AI Data Context Provider
  *
  * @param {AiDataContextProviderProps} props - Component props.
- * @return {React.ReactElement}                           Context provider.
+ * @return {ReactElement}                           Context provider.
  * @example
  * <AiDataContextProvider value={ value }>
  * 	{ children }
@@ -74,6 +75,6 @@ export const AiDataContext = createContext< AiDataContextProps | object >( {} );
 export const AiDataContextProvider = ( {
 	value,
 	children,
-}: AiDataContextProviderProps ): React.ReactElement => (
+}: AiDataContextProviderProps ): ReactElement => (
 	<AiDataContext.Provider value={ value } children={ children } />
 );

package/src/data-flow/with-ai-assistant-data.tsx

@@ -3,62 +3,59 @@
  */
 import { createHigherOrderComponent } from '@wordpress/compose';
 import { useMemo } from '@wordpress/element';
-import React from 'react';
 /**
  * Internal Dependencies
  */
 import useAiSuggestions from '../hooks/use-ai-suggestions/index.ts';
 import { AiDataContextProvider } from './index.ts';
+import type { ReactElement, 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.
  */
-const withAiDataProvider = createHigherOrderComponent(
-	( WrappedComponent: React.ComponentType ) => {
-		return props => {
-			// Connect with the AI Assistant communication layer.
-			const {
+const withAiDataProvider = createHigherOrderComponent( ( WrappedComponent: ComponentType ) => {
+	return props => {
+		// Connect with the AI Assistant communication layer.
+		const {
+			suggestion,
+			error: requestingError,
+			requestingState,
+			request: requestSuggestion,
+			stopSuggestion,
+			eventSource,
+		} = useAiSuggestions();
+
+		// Build the context value to pass to the ai assistant data provider.
+		const dataContextValue = useMemo(
+			() => ( {
 				suggestion,
-				error: requestingError,
+				requestingError,
 				requestingState,
-				request: requestSuggestion,
-				stopSuggestion,
 				eventSource,
-			} = useAiSuggestions();
 
-			// Build the context value to pass to the ai assistant data provider.
-			const dataContextValue = useMemo(
-				() => ( {
-					suggestion,
-					requestingError,
-					requestingState,
-					eventSource,
-
-					requestSuggestion,
-					stopSuggestion,
-				} ),
-				[
-					suggestion,
-					requestingError,
-					requestingState,
-					eventSource,
-					requestSuggestion,
-					stopSuggestion,
-				]
-			);
+				requestSuggestion,
+				stopSuggestion,
+			} ),
+			[
+				suggestion,
+				requestingError,
+				requestingState,
+				eventSource,
+				requestSuggestion,
+				stopSuggestion,
+			]
+		);
 
-			return (
-				<AiDataContextProvider value={ dataContextValue }>
-					<WrappedComponent { ...props } />
-				</AiDataContextProvider>
-			);
-		};
-	},
-	'withAiDataProvider'
-);
+		return (
+			<AiDataContextProvider value={ dataContextValue }>
+				<WrappedComponent { ...props } />
+			</AiDataContextProvider>
+		);
+	};
+}, 'withAiDataProvider' );
 
 export default withAiDataProvider;

package/src/icons/ai-assistant.tsx

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { SVG, Path } from '@wordpress/components';
-import React from 'react';
 
 const aiAssistant = (
 	<SVG

package/src/icons/mic.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { SVG, Rect, Path } from '@wordpress/components';
-import React from 'react';
 
 const mic = (
 	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/SVG">

package/src/icons/origami-plane.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { SVG, Path } from '@wordpress/components';
-import React from 'react';
 
 const origamiPlane = (
 	<SVG

package/src/icons/player-pause.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { SVG, Path, Rect } from '@wordpress/components';
-import React from 'react';
 
 const playerPause = (
 	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/SVG">

package/src/icons/player-play.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { SVG, Path } from '@wordpress/components';
-import React from 'react';
 
 const playerPlay = (
 	<SVG width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/icons/player-stop.tsx

@@ -2,7 +2,6 @@
  * External dependencies
  */
 import { SVG, Rect, Path } from '@wordpress/components';
-import React from 'react';
 
 const playerStop = (
 	<SVG width="32" height="32" viewBox="0 0 32 32" fill="none" xmlns="http://www.w3.org/2000/SVG">

package/src/icons/speak-tone.tsx

@@ -2,7 +2,6 @@
  * WordPress dependencies
  */
 import { SVG, Path } from '@wordpress/components';
-import React from 'react';
 
 const speakTone = (
 	<SVG width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">

package/src/logo-generator/components/feature-fetch-failure-screen.tsx

@@ -6,9 +6,9 @@ import { __ } from '@wordpress/i18n';
 /**
  * Types
  */
-import type React from 'react';
+import type { FC } from 'react';
 
-export const FeatureFetchFailureScreen: React.FC< {
+export const FeatureFetchFailureScreen: FC< {
 	onCancel: () => void;
 	onRetry?: () => void;
 } > = ( { onCancel, onRetry } ) => {

package/src/logo-generator/components/first-load-screen.tsx

@@ -2,14 +2,14 @@
  * External dependencies
  */
 import { __ } from '@wordpress/i18n';
-import React from 'react';
 /**
  * Internal dependencies
  */
 import { ImageLoader } from './image-loader.tsx';
 import './first-load-screen.scss';
+import type { FC } from 'react';
 
-export const FirstLoadScreen: React.FC< {
+export const FirstLoadScreen: FC< {
 	state?: 'loadingFeature' | 'analyzing' | 'generating';
 } > = ( { state = 'loadingFeature' } ) => {
 	const loadingLabel = __( 'Loading…', 'jetpack-ai-client' );

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

@@ -36,11 +36,11 @@ import './generator-modal.scss';
  * Types
  */
 import type { GeneratorModalProps } from '../types.ts';
-import type React from 'react';
+import type { FC, ReactNode } from 'react';
 
 const debug = debugFactory( 'jetpack-ai-calypso:generator-modal' );
 
-export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
+export const GeneratorModal: FC< GeneratorModalProps > = ( {
 	isOpen,
 	onClose,
 	onApplyLogo,
@@ -259,7 +259,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 		}
 	}, [ isOpen, handleModalOpen ] );
 
-	let body: React.ReactNode;
+	let body: ReactNode;
 
 	if ( loadingState ) {
 		body = <FirstLoadScreen state={ loadingState } />;

package/src/logo-generator/components/history-carousel.tsx

@@ -14,9 +14,9 @@ import './history-carousel.scss';
 /**
  * Types
  */
-import type React from 'react';
+import type { FC } from 'react';
 
-export const HistoryCarousel: React.FC = () => {
+export const HistoryCarousel: FC = () => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
 	const { logos, selectedLogo, setSelectedLogoIndex, context, isLoadingHistory } =

package/src/logo-generator/components/image-loader.tsx

@@ -9,9 +9,9 @@ import loader from '../assets/images/loader.gif';
 /**
  * Types
  */
-import type React from 'react';
+import type { FC } from 'react';
 
-export const ImageLoader: React.FC< { className?: string } > = ( { className = null } ) => {
+export const ImageLoader: FC< { className?: string } > = ( { className = null } ) => {
 	return (
 		<img
 			src={ loader }