AI Extension: update proofread with the AI Status Indicator component (…

…#32397)

* [not verified] expose AiStatusIndicator component

* [not verified] use AiStatusIndicator in proofread implementation

* [not verified] changelog

* Update changelog

---------

Co-authored-by: Renato Augusto Gama dos Santos <renato_0603@hotmail.com>

projects/js-packages/ai-client/changelog/update-proofread-ai-assistant-status

@@ -0,0 +1,4 @@
+Significance: patch
+Type: added
+
+AI Client: Export AiStatusIndicator

projects/js-packages/ai-client/index.ts

@@ -18,7 +18,7 @@ export * from './src/icons';
 /*
  * Components
  */
-export { default as AIControl } from './src/components/ai-control';
+export * from './src/components';
 
 /*
  * Contexts

projects/js-packages/ai-client/src/components/index.ts

@@ -0,0 +1,2 @@
+export { default as AIControl } from './ai-control';
+export { default as AiStatusIndicator } from './ai-status-indicator';

projects/plugins/jetpack/changelog/update-proofread-ai-assistant-status

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+AI Extension: update proofread with the AI Status Indicator component

projects/plugins/jetpack/extensions/plugins/ai-assistant-plugin/components/proofread/index.tsx

@@ -1,14 +1,14 @@
 /**
  * External dependencies
  */
-import { aiAssistantIcon, useAiSuggestions } from '@automattic/jetpack-ai-client';
+import { AiStatusIndicator, useAiSuggestions } from '@automattic/jetpack-ai-client';
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
 import { serialize } from '@wordpress/blocks';
-import { Modal, Button, Spinner } from '@wordpress/components';
+import { Modal, Button } from '@wordpress/components';
 import { useSelect } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
-import { Icon, close } from '@wordpress/icons';
+import { close } from '@wordpress/icons';
 import TurndownService from 'turndown';
 /**
  * Internal dependencies
@@ -28,11 +28,11 @@ const usePostContent = () => {
 	return blocks?.length ? turndownService.turndown( serialize( blocks ) ) : '';
 };
 
-const ModalHeader = ( { loading, onClose } ) => {
+const ModalHeader = ( { requestingState, onClose } ) => {
 	return (
 		<div className="ai-assistant-post-feedback__modal-header">
 			<div className="ai-assistant-post-feedback__modal-title-wrapper">
-				{ loading ? <Spinner /> : <Icon icon={ aiAssistantIcon } /> }
+				<AiStatusIndicator state={ requestingState } />
 				<h1 className="ai-assistant-post-feedback__modal-title">
 					{ __( 'AI Assistant', 'jetpack' ) }
 				</h1>
@@ -120,10 +120,7 @@ export default function Proofread( {
 			{ isProofreadModalVisible && (
 				<Modal __experimentalHideHeader>
 					<div className="ai-assistant-post-feedback__modal-content">
-						<ModalHeader
-							loading={ requestingState === 'suggesting' || requestingState === 'requesting' }
-							onClose={ toggleProofreadModal }
-						/>
+						<ModalHeader requestingState={ requestingState } onClose={ toggleProofreadModal } />
 						<hr className="ai-assistant-post-feedback__modal-divider" />
 						<div className="ai-assistant-post-feedback__suggestion">{ suggestion }</div>
 					</div>