@automattic/jetpack-ai-client 0.8.1 → 0.9.0

package/CHANGELOG.md

@@ -5,6 +5,28 @@ 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.9.0] - 2024-03-12
+### Changed
+- Fix typescript errors [#35904]
+- Updated package dependencies. [#36325]
+
+### Fixed
+- AI Client: Fix audio recording where WebM is not supported (iOS for example). [#36160]
+
+## [0.8.2] - 2024-03-04
+### Added
+- AI Client: add audio validation hook. [#36043]
+- Voice to Content: Close audio stream on hook destruction [#36086]
+
+### Changed
+- AI Client: change loading and error state handling on media recording hook. [#36001]
+- AI Client: publish audio information on the validation success callback of the audio validation hook. [#36094]
+- Updated package dependencies. [#36095]
+- Updated package dependencies. [#36143]
+
+### Fixed
+- AI Client: fixed transcription request from P2 editor [#36081]
+
 ## [0.8.1] - 2024-02-27
 ### Changed
 - AI Client: support audio transcription and transcription post-processing canceling. [#35923]
@@ -233,6 +255,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.9.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.8.2...v0.9.0
+[0.8.2]: https://github.com/Automattic/jetpack-ai-client/compare/v0.8.1...v0.8.2
 [0.8.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.8.0...v0.8.1
 [0.8.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.7.0...v0.8.0
 [0.7.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.6.1...v0.7.0

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

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

package/build/api-fetch/index.js

@@ -2,5 +2,9 @@
  * External dependencies
  */
 import apiFetchMod from '@wordpress/api-fetch';
-const apiFetch = (apiFetchMod.default ?? apiFetchMod);
+// @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.
+// See https://arethetypeswrong.github.io/?p=@wordpress/api-fetch@6.47.0
+// This is a helper to simplify the usage of the api-fetch module on the ai-client package.
+const apiFetch = 'default' in apiFetchMod ? apiFetchMod.default : apiFetchMod;
 export default apiFetch;

package/build/audio-transcription/index.js

@@ -5,7 +5,6 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import apiFetch from '../api-fetch/index.js';
 import requestJwt from '../jwt/index.js';
 const debug = debugFactory('jetpack-ai-client:audio-transcription');
 /**
@@ -34,15 +33,19 @@ export default async function transcribeAudio(audio, feature, requestAbortSignal
         const headers = {
             Authorization: `Bearer ${token}`,
         };
-        const response = await apiFetch({
-            url: `https://public-api.wordpress.com/wpcom/v2/jetpack-ai-transcription${feature ? `?feature=${feature}` : ''}`,
+        const URL = `https://public-api.wordpress.com/wpcom/v2/jetpack-ai-transcription${feature ? `?feature=${feature}` : ''}`;
+        return fetch(URL, {
             method: 'POST',
             body: formData,
             headers,
             signal: requestAbortSignal ?? undefined,
+        }).then(response => {
+            debug('Transcription response: %o', response);
+            if (response.ok) {
+                return response.json().then(data => data?.text);
+            }
+            return response.json().then(data => Promise.reject(data));
         });
-        debug('Transcription response: %o', response);
-        return response.text;
     }
     catch (error) {
         debug('Transcription error response: %o', error);

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

@@ -35,6 +35,6 @@ type AiControlProps = {
  * @param {React.MutableRefObject} ref - Ref to the component.
  * @returns {ReactElement}         Rendered component.
  */
-export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, bannerComponent, errorComponent, }: AiControlProps, ref: React.MutableRefObject<null>): ReactElement;
-declare const _default: React.ForwardRefExoticComponent<AiControlProps & React.RefAttributes<null>>;
+export declare function AIControl({ disabled, value, placeholder, showAccept, acceptLabel, showButtonLabels, isTransparent, state, showGuideLine, customFooter, onChange, onSend, onStop, onAccept, onDiscard, showRemove, bannerComponent, errorComponent, }: AiControlProps, ref: React.MutableRefObject<HTMLInputElement>): ReactElement;
+declare const _default: React.ForwardRefExoticComponent<AiControlProps & React.RefAttributes<HTMLInputElement>>;
 export default _default;

package/build/hooks/use-audio-transcription/index.js

@@ -2,12 +2,45 @@
  * External dependencies
  */
 import { useCallback, useState, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
 import transcribeAudio from '../../audio-transcription/index.js';
 const debug = debugFactory('jetpack-ai-client:use-audio-transcription');
+/**
+ * Map error response to a string.
+ * @param {Error | string | AudioTranscriptionErrorResponse} error - The error response from the audio transcription service.
+ * @returns {string} the translated error message
+ */
+const mapErrorResponse = (error) => {
+    if (typeof error === 'string') {
+        return error;
+    }
+    if ('code' in error) {
+        switch (error.code) {
+            case 'error_quota_exceeded':
+                return __('You exceeded your current quota, please check your plan details.', 'jetpack-ai-client');
+            case 'jetpack_ai_missing_audio_param':
+                return __('The audio_file is required to perform a transcription.', 'jetpack-ai-client');
+            case 'jetpack_ai_service_unavailable':
+                return __('The Jetpack AI service is temporarily unavailable.', 'jetpack-ai-client');
+            case 'file_size_not_supported':
+                return __('The provided audio file is too big.', 'jetpack-ai-client');
+            case 'file_type_not_supported':
+                return __('The provided audio file type is not supported.', 'jetpack-ai-client');
+            case 'jetpack_ai_error':
+                return __('There was an error processing the transcription request.', 'jetpack-ai-client');
+            default:
+                return error.message;
+        }
+    }
+    if ('message' in error) {
+        return error.message;
+    }
+    return __('There was an error processing the transcription request.', 'jetpack-ai-client');
+};
 /**
  * A hook to handle audio transcription.
  *
@@ -43,7 +76,7 @@ export default function useAudioTranscription({ feature, onReady, onError, }) {
             .catch(error => {
             if (!controller.signal.aborted) {
                 setTranscriptionError(error.message);
-                onError?.(error.message);
+                onError?.(mapErrorResponse(error));
             }
         })
             .finally(() => setIsTranscribingAudio(false));

package/build/hooks/use-audio-validation/index.d.ts

@@ -0,0 +1,21 @@
+/**
+ * The return value for the audio validation hook.
+ */
+export type UseAudioValidationReturn = {
+    isValidatingAudio: boolean;
+    validateAudio: (audio: Blob, successCallback: (info?: ValidatedAudioInformation) => void, errorCallback: (error: string) => void) => void;
+};
+/**
+ * The validated audio information.
+ */
+export type ValidatedAudioInformation = {
+    duration: number;
+    isFile: boolean;
+    size: number;
+};
+/**
+ * Hook to handle the validation of an audio file.
+ *
+ * @returns {UseAudioValidationReturn} - Object with the audio validation state and the function to validate the audio.
+ */
+export default function useAudioValidation(): UseAudioValidationReturn;

package/build/hooks/use-audio-validation/index.js

@@ -0,0 +1,61 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+const MAX_AUDIO_SIZE = 25000000; // 25MB
+const MAX_AUDIO_DURATION = 25 * 60; // 25 minutes
+const ALLOWED_MEDIA_TYPES = [
+    'audio/mpeg',
+    'audio/mp3',
+    'audio/ogg',
+    'audio/flac',
+    'audio/x-flac',
+    'audio/m4a',
+    'audio/x-m4a',
+    'audio/mp4',
+    'audio/wav',
+    'audio/wave',
+    'audio/x-wav',
+    'audio/webm',
+];
+/**
+ * Hook to handle the validation of an audio file.
+ *
+ * @returns {UseAudioValidationReturn} - Object with the audio validation state and the function to validate the audio.
+ */
+export default function useAudioValidation() {
+    const [isValidatingAudio, setIsValidatingAudio] = useState(false);
+    const validateAudio = useCallback((audio, successCallback, errorCallback) => {
+        setIsValidatingAudio(true);
+        // Check if the audio file is too large
+        if (audio?.size > MAX_AUDIO_SIZE) {
+            setIsValidatingAudio(false);
+            return errorCallback(__('The audio file is too large. The maximum file size is 25MB.', 'jetpack-ai-client'));
+        }
+        // When it's a file, check the media type
+        const isFile = audio instanceof File;
+        if (isFile) {
+            if (!ALLOWED_MEDIA_TYPES.includes(audio.type)) {
+                setIsValidatingAudio(false);
+                return errorCallback(__('The audio file type is not supported. Please use a supported audio file type.', 'jetpack-ai-client'));
+            }
+        }
+        // Check the duration of the audio
+        const audioContext = new AudioContext();
+        // Map blob to an array buffer
+        audio.arrayBuffer().then(arrayBuffer => {
+            // Decode audio file data contained in an ArrayBuffer
+            audioContext.decodeAudioData(arrayBuffer, function (audioBuffer) {
+                const duration = Math.ceil(audioBuffer.duration);
+                if (duration > MAX_AUDIO_DURATION) {
+                    setIsValidatingAudio(false);
+                    return errorCallback(__('The audio file is too long. The maximum recording time is 25 minutes.', 'jetpack-ai-client'));
+                }
+                setIsValidatingAudio(false);
+                return successCallback({ duration, isFile, size: audio?.size });
+            });
+        });
+    }, [setIsValidatingAudio]);
+    return { isValidatingAudio, validateAudio };
+}

package/build/hooks/use-media-recording/index.d.ts

@@ -1,4 +1,4 @@
-export type RecordingState = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
+export type RecordingState = 'inactive' | 'recording' | 'paused' | 'error';
 type UseMediaRecordingProps = {
     onDone?: (blob: Blob) => void;
 };
@@ -27,10 +27,6 @@ type UseMediaRecordingReturn = {
      * The error handler
      */
     onError: (err: string | Error) => void;
-    /**
-     * The processing handler
-     */
-    onProcessing: () => void;
     controls: {
         /**
          * `start` recording handler

package/build/hooks/use-media-recording/index.js

@@ -2,6 +2,12 @@
  * External dependencies
  */
 import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
+/**
+ * Media types
+ */
+const MEDIA_TYPE_MP4_MP4A = 'audio/mp4;codecs=mp4a';
+const MEDIA_TYPE_MP4 = 'audio/mp4';
+const MEDIA_TYPE_WEBM = 'audio/webm';
 /**
  * react custom hook to handle media recording.
  *
@@ -11,7 +17,7 @@ import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
 export default function useMediaRecording({ onDone, } = {}) {
     // Reference to the media recorder instance
     const mediaRecordRef = useRef(null);
-    // Recording state: `inactive`, `recording`, `paused`, `processing`, `error`
+    // Recording state: `inactive`, `recording`, `paused`, `error`
     const [state, setState] = useState('inactive');
     // reference to the paused state to be used in the `onDataAvailable` event listener,
     // as the `mediaRecordRef.current.state` is already `inactive` when the recorder is stopped,
@@ -19,6 +25,7 @@ export default function useMediaRecording({ onDone, } = {}) {
     const isPaused = useRef(false);
     const recordStartTimestamp = useRef(0);
     const [duration, setDuration] = useState(0);
+    const audioStream = useRef(null);
     // The recorded blob
     const [blob, setBlob] = useState(null);
     // Store the recorded chunks
@@ -31,9 +38,10 @@ export default function useMediaRecording({ onDone, } = {}) {
      * @returns {Blob} The recorded blob
      */
     function getBlob() {
-        return new Blob(recordedChunks, {
-            type: 'audio/webm',
-        });
+        if (MediaRecorder.isTypeSupported(MEDIA_TYPE_MP4_MP4A)) {
+            return new Blob(recordedChunks, { type: MEDIA_TYPE_MP4 }); // omit the codecs parameter
+        }
+        return new Blob(recordedChunks, { type: MEDIA_TYPE_WEBM });
     }
     // `start` recording handler
     const start = useCallback((timeslice) => {
@@ -111,9 +119,18 @@ export default function useMediaRecording({ onDone, } = {}) {
         navigator.mediaDevices
             .getUserMedia(constraints)
             .then(stream => {
+            audioStream.current = stream;
             const source = audioCtx.createMediaStreamSource(stream);
             source.connect(analyser.current);
-            mediaRecordRef.current = new MediaRecorder(stream);
+            /**
+             * Special handling for iOS devices.
+             */
+            if (MediaRecorder.isTypeSupported(MEDIA_TYPE_MP4_MP4A)) {
+                mediaRecordRef.current = new MediaRecorder(stream, { mimeType: MEDIA_TYPE_MP4_MP4A });
+            }
+            else {
+                mediaRecordRef.current = new MediaRecorder(stream, { mimeType: MEDIA_TYPE_WEBM });
+            }
             mediaRecordRef.current.addEventListener('start', onStartListener);
             mediaRecordRef.current.addEventListener('stop', onStopListener);
             mediaRecordRef.current.addEventListener('pause', onPauseListener);
@@ -131,10 +148,6 @@ export default function useMediaRecording({ onDone, } = {}) {
         setError(typeof err === 'string' ? err : err.message);
         setState('error');
     }, []);
-    // manually set the state to `processing` for the file upload case
-    const onProcessing = useCallback(() => {
-        setState('processing');
-    }, []);
     /**
      * `start` event listener for the media recorder instance.
      */
@@ -148,7 +161,6 @@ export default function useMediaRecording({ onDone, } = {}) {
      * @returns {void}
      */
     function onStopListener() {
-        setState('processing');
         const lastBlob = getBlob();
         onDone?.(lastBlob);
         // Clear the recorded chunks
@@ -192,10 +204,20 @@ export default function useMediaRecording({ onDone, } = {}) {
             });
         }
     }
+    /**
+     * Close the audio stream
+     */
+    function closeStream() {
+        if (audioStream.current) {
+            const tracks = audioStream.current.getTracks();
+            tracks.forEach(track => track.stop());
+        }
+    }
     // Remove listeners and clear the recorded chunks
     useEffect(() => {
         reset();
         return () => {
+            closeStream();
             clearListeners();
         };
     }, []);
@@ -206,7 +228,6 @@ export default function useMediaRecording({ onDone, } = {}) {
         duration,
         analyser: analyser.current,
         onError,
-        onProcessing,
         controls: {
             start,
             pause,

package/build/index.d.ts

@@ -6,6 +6,7 @@ export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
+export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 export * from './icons/index.js';
 export * from './components/index.js';
 export * from './data-flow/index.js';

package/build/index.js

@@ -12,6 +12,7 @@ export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
+export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 /*
  * Components: Icons
  */

package/build/types.d.ts

@@ -17,6 +17,7 @@ export type { UseAiContextOptions } from './data-flow/use-ai-context.js';
 export type { RequestingErrorProps } from './hooks/use-ai-suggestions/index.js';
 export type { UseAudioTranscriptionProps, UseAudioTranscriptionReturn, } from './hooks/use-audio-transcription/index.js';
 export type { UseTranscriptionPostProcessingProps, UseTranscriptionPostProcessingReturn, PostProcessingAction, } from './hooks/use-transcription-post-processing/index.js';
+export type { UseAudioValidationReturn, ValidatedAudioInformation, } from './hooks/use-audio-validation/index.js';
 export { TRANSCRIPTION_POST_PROCESSING_ACTION_SIMPLE_DRAFT } from './hooks/use-transcription-post-processing/index.js';
 export declare const REQUESTING_STATES: readonly ["init", "requesting", "suggesting", "done", "error"];
 export type RequestingStateProp = (typeof REQUESTING_STATES)[number];
@@ -27,15 +28,4 @@ export type { RecordingState } from './hooks/use-media-recording/index.js';
 export type CancelablePromise<T = void> = Promise<T> & {
     canceled?: boolean;
 };
-interface JPConnectionInitialState {
-    apiNonce: string;
-    siteSuffix: string;
-    connectionStatus: {
-        isActive: boolean;
-    };
-}
-declare global {
-    interface Window {
-        JP_CONNECTION_INITIAL_STATE: JPConnectionInitialState;
-    }
-}
+export type TranscriptionState = RecordingState | 'validating' | 'processing' | 'error';

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.8.1",
+	"version": "0.9.0",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -38,19 +38,19 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.17",
-		"@automattic/jetpack-connection": "^0.32.4",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.3",
+		"@automattic/jetpack-base-styles": "^0.6.19",
+		"@automattic/jetpack-connection": "^0.33.3",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.7",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@types/react": "18.2.33",
-		"@wordpress/api-fetch": "6.48.0",
-		"@wordpress/block-editor": "12.19.0",
-		"@wordpress/components": "26.0.0",
-		"@wordpress/compose": "6.28.0",
-		"@wordpress/data": "9.21.0",
-		"@wordpress/element": "5.28.0",
-		"@wordpress/i18n": "4.51.0",
-		"@wordpress/icons": "9.42.0",
+		"@types/react": "18.2.61",
+		"@wordpress/api-fetch": "6.50.0",
+		"@wordpress/block-editor": "12.21.0",
+		"@wordpress/components": "27.1.0",
+		"@wordpress/compose": "6.30.0",
+		"@wordpress/data": "9.23.0",
+		"@wordpress/element": "5.30.0",
+		"@wordpress/i18n": "4.53.0",
+		"@wordpress/icons": "9.44.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"react": "18.2.0",

package/src/api-fetch/index.ts

@@ -7,7 +7,8 @@ import apiFetchMod from '@wordpress/api-fetch';
 // while some other environments (including code running inside WordPress itself) see it at apiFetch.
 // See https://arethetypeswrong.github.io/?p=@wordpress/api-fetch@6.47.0
 // This is a helper to simplify the usage of the api-fetch module on the ai-client package.
-type ApiFetchType = typeof apiFetchMod.default;
-const apiFetch: ApiFetchType = ( apiFetchMod.default ?? apiFetchMod ) as ApiFetchType;
+const apiFetch = 'default' in apiFetchMod ? apiFetchMod.default : apiFetchMod;
+// eslint-disable-next-line @typescript-eslint/ban-types
+type ApiFetchType = typeof apiFetch extends Function ? typeof apiFetch : typeof apiFetchMod;
 
-export default apiFetch;
+export default apiFetch as ApiFetchType;

package/src/audio-transcription/index.ts

@@ -5,21 +5,10 @@ import debugFactory from 'debug';
 /**
  * Internal dependencies
  */
-import apiFetch from '../api-fetch/index.js';
 import requestJwt from '../jwt/index.js';
 
 const debug = debugFactory( 'jetpack-ai-client:audio-transcription' );
 
-/**
- * The response from the audio transcription service.
- */
-type AudioTranscriptionResponse = {
-	/**
-	 * The transcribed text.
-	 */
-	text: string;
-};
-
 /**
  * A function that takes an audio blob and transcribes it.
  *
@@ -53,19 +42,22 @@ export default async function transcribeAudio(
 			Authorization: `Bearer ${ token }`,
 		};
 
-		const response: AudioTranscriptionResponse = await apiFetch( {
-			url: `https://public-api.wordpress.com/wpcom/v2/jetpack-ai-transcription${
-				feature ? `?feature=${ feature }` : ''
-			}`,
+		const URL = `https://public-api.wordpress.com/wpcom/v2/jetpack-ai-transcription${
+			feature ? `?feature=${ feature }` : ''
+		}`;
+
+		return fetch( URL, {
 			method: 'POST',
 			body: formData,
 			headers,
 			signal: requestAbortSignal ?? undefined,
+		} ).then( response => {
+			debug( 'Transcription response: %o', response );
+			if ( response.ok ) {
+				return response.json().then( data => data?.text );
+			}
+			return response.json().then( data => Promise.reject( data ) );
 		} );
-
-		debug( 'Transcription response: %o', response );
-
-		return response.text;
 	} catch ( error ) {
 		debug( 'Transcription error response: %o', error );
 		return Promise.reject( error );

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

@@ -73,7 +73,7 @@ export function AIControl(
 		bannerComponent = null,
 		errorComponent = null,
 	}: AiControlProps,
-	ref: React.MutableRefObject< null >
+	ref: React.MutableRefObject< HTMLInputElement >
 ): ReactElement {
 	const promptUserInputRef = useRef( null );
 	const loading = state === 'requesting' || state === 'suggesting';

package/src/hooks/use-audio-transcription/index.ts

@@ -2,6 +2,7 @@
  * External dependencies
  */
 import { useCallback, useState, useRef } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
@@ -30,6 +31,63 @@ export type UseAudioTranscriptionProps = {
 	onError?: ( error: string ) => void;
 };
 
+/**
+ * The error response from the audio transcription service.
+ */
+type AudioTranscriptionErrorResponse = {
+	/**
+	 * The error message.
+	 */
+	message: string;
+
+	/**
+	 * The error code.
+	 */
+	code: string;
+};
+
+/**
+ * Map error response to a string.
+ * @param {Error | string | AudioTranscriptionErrorResponse} error - The error response from the audio transcription service.
+ * @returns {string} the translated error message
+ */
+const mapErrorResponse = ( error: Error | string | AudioTranscriptionErrorResponse ): string => {
+	if ( typeof error === 'string' ) {
+		return error;
+	}
+
+	if ( 'code' in error ) {
+		switch ( error.code ) {
+			case 'error_quota_exceeded':
+				return __(
+					'You exceeded your current quota, please check your plan details.',
+					'jetpack-ai-client'
+				);
+			case 'jetpack_ai_missing_audio_param':
+				return __( 'The audio_file is required to perform a transcription.', 'jetpack-ai-client' );
+			case 'jetpack_ai_service_unavailable':
+				return __( 'The Jetpack AI service is temporarily unavailable.', 'jetpack-ai-client' );
+			case 'file_size_not_supported':
+				return __( 'The provided audio file is too big.', 'jetpack-ai-client' );
+			case 'file_type_not_supported':
+				return __( 'The provided audio file type is not supported.', 'jetpack-ai-client' );
+			case 'jetpack_ai_error':
+				return __(
+					'There was an error processing the transcription request.',
+					'jetpack-ai-client'
+				);
+			default:
+				return error.message;
+		}
+	}
+
+	if ( 'message' in error ) {
+		return error.message;
+	}
+
+	return __( 'There was an error processing the transcription request.', 'jetpack-ai-client' );
+};
+
 /**
  * A hook to handle audio transcription.
  *
@@ -74,7 +132,7 @@ export default function useAudioTranscription( {
 				.catch( error => {
 					if ( ! controller.signal.aborted ) {
 						setTranscriptionError( error.message );
-						onError?.( error.message );
+						onError?.( mapErrorResponse( error ) );
 					}
 				} )
 				.finally( () => setIsTranscribingAudio( false ) );

package/src/hooks/use-audio-validation/index.ts

@@ -0,0 +1,110 @@
+/**
+ * External dependencies
+ */
+import { useCallback, useState } from '@wordpress/element';
+import { __ } from '@wordpress/i18n';
+
+const MAX_AUDIO_SIZE = 25000000; // 25MB
+const MAX_AUDIO_DURATION = 25 * 60; // 25 minutes
+const ALLOWED_MEDIA_TYPES = [
+	'audio/mpeg',
+	'audio/mp3',
+	'audio/ogg',
+	'audio/flac',
+	'audio/x-flac',
+	'audio/m4a',
+	'audio/x-m4a',
+	'audio/mp4',
+	'audio/wav',
+	'audio/wave',
+	'audio/x-wav',
+	'audio/webm',
+];
+
+/**
+ * The return value for the audio validation hook.
+ */
+export type UseAudioValidationReturn = {
+	isValidatingAudio: boolean;
+	validateAudio: (
+		audio: Blob,
+		successCallback: ( info?: ValidatedAudioInformation ) => void,
+		errorCallback: ( error: string ) => void
+	) => void;
+};
+
+/**
+ * The validated audio information.
+ */
+export type ValidatedAudioInformation = {
+	duration: number;
+	isFile: boolean;
+	size: number;
+};
+
+/**
+ * Hook to handle the validation of an audio file.
+ *
+ * @returns {UseAudioValidationReturn} - Object with the audio validation state and the function to validate the audio.
+ */
+export default function useAudioValidation(): UseAudioValidationReturn {
+	const [ isValidatingAudio, setIsValidatingAudio ] = useState< boolean >( false );
+
+	const validateAudio = useCallback(
+		(
+			audio: Blob,
+			successCallback: ( info?: ValidatedAudioInformation ) => void,
+			errorCallback: ( error: string ) => void
+		) => {
+			setIsValidatingAudio( true );
+
+			// Check if the audio file is too large
+			if ( audio?.size > MAX_AUDIO_SIZE ) {
+				setIsValidatingAudio( false );
+				return errorCallback(
+					__( 'The audio file is too large. The maximum file size is 25MB.', 'jetpack-ai-client' )
+				);
+			}
+
+			// When it's a file, check the media type
+			const isFile = audio instanceof File;
+			if ( isFile ) {
+				if ( ! ALLOWED_MEDIA_TYPES.includes( audio.type ) ) {
+					setIsValidatingAudio( false );
+					return errorCallback(
+						__(
+							'The audio file type is not supported. Please use a supported audio file type.',
+							'jetpack-ai-client'
+						)
+					);
+				}
+			}
+
+			// Check the duration of the audio
+			const audioContext = new AudioContext();
+
+			// Map blob to an array buffer
+			audio.arrayBuffer().then( arrayBuffer => {
+				// Decode audio file data contained in an ArrayBuffer
+				audioContext.decodeAudioData( arrayBuffer, function ( audioBuffer ) {
+					const duration = Math.ceil( audioBuffer.duration );
+
+					if ( duration > MAX_AUDIO_DURATION ) {
+						setIsValidatingAudio( false );
+						return errorCallback(
+							__(
+								'The audio file is too long. The maximum recording time is 25 minutes.',
+								'jetpack-ai-client'
+							)
+						);
+					}
+					setIsValidatingAudio( false );
+					return successCallback( { duration, isFile, size: audio?.size } );
+				} );
+			} );
+		},
+		[ setIsValidatingAudio ]
+	);
+
+	return { isValidatingAudio, validateAudio };
+}

package/src/hooks/use-media-recording/index.ts

@@ -5,11 +5,18 @@ import { useRef, useState, useEffect, useCallback } from '@wordpress/element';
 /*
  * Types
  */
-export type RecordingState = 'inactive' | 'recording' | 'paused' | 'processing' | 'error';
+export type RecordingState = 'inactive' | 'recording' | 'paused' | 'error';
 type UseMediaRecordingProps = {
 	onDone?: ( blob: Blob ) => void;
 };
 
+/**
+ * Media types
+ */
+const MEDIA_TYPE_MP4_MP4A = 'audio/mp4;codecs=mp4a';
+const MEDIA_TYPE_MP4 = 'audio/mp4';
+const MEDIA_TYPE_WEBM = 'audio/webm';
+
 type UseMediaRecordingReturn = {
 	/**
 	 * The current recording state
@@ -41,11 +48,6 @@ type UseMediaRecordingReturn = {
 	 */
 	onError: ( err: string | Error ) => void;
 
-	/**
-	 * The processing handler
-	 */
-	onProcessing: () => void;
-
 	controls: {
 		/**
 		 * `start` recording handler
@@ -90,7 +92,7 @@ export default function useMediaRecording( {
 	// Reference to the media recorder instance
 	const mediaRecordRef = useRef( null );
 
-	// Recording state: `inactive`, `recording`, `paused`, `processing`, `error`
+	// Recording state: `inactive`, `recording`, `paused`, `error`
 	const [ state, setState ] = useState< RecordingState >( 'inactive' );
 
 	// reference to the paused state to be used in the `onDataAvailable` event listener,
@@ -101,6 +103,8 @@ export default function useMediaRecording( {
 	const recordStartTimestamp = useRef< number >( 0 );
 	const [ duration, setDuration ] = useState< number >( 0 );
 
+	const audioStream = useRef< MediaStream | null >( null );
+
 	// The recorded blob
 	const [ blob, setBlob ] = useState< Blob | null >( null );
 
@@ -117,9 +121,11 @@ export default function useMediaRecording( {
 	 * @returns {Blob} The recorded blob
 	 */
 	function getBlob() {
-		return new Blob( recordedChunks, {
-			type: 'audio/webm',
-		} );
+		if ( MediaRecorder.isTypeSupported( MEDIA_TYPE_MP4_MP4A ) ) {
+			return new Blob( recordedChunks, { type: MEDIA_TYPE_MP4 } ); // omit the codecs parameter
+		}
+
+		return new Blob( recordedChunks, { type: MEDIA_TYPE_WEBM } );
 	}
 
 	// `start` recording handler
@@ -216,10 +222,19 @@ export default function useMediaRecording( {
 		navigator.mediaDevices
 			.getUserMedia( constraints )
 			.then( stream => {
+				audioStream.current = stream;
 				const source = audioCtx.createMediaStreamSource( stream );
 				source.connect( analyser.current );
 
-				mediaRecordRef.current = new MediaRecorder( stream );
+				/**
+				 * Special handling for iOS devices.
+				 */
+				if ( MediaRecorder.isTypeSupported( MEDIA_TYPE_MP4_MP4A ) ) {
+					mediaRecordRef.current = new MediaRecorder( stream, { mimeType: MEDIA_TYPE_MP4_MP4A } );
+				} else {
+					mediaRecordRef.current = new MediaRecorder( stream, { mimeType: MEDIA_TYPE_WEBM } );
+				}
+
 				mediaRecordRef.current.addEventListener( 'start', onStartListener );
 				mediaRecordRef.current.addEventListener( 'stop', onStopListener );
 				mediaRecordRef.current.addEventListener( 'pause', onPauseListener );
@@ -239,11 +254,6 @@ export default function useMediaRecording( {
 		setState( 'error' );
 	}, [] );
 
-	// manually set the state to `processing` for the file upload case
-	const onProcessing = useCallback( () => {
-		setState( 'processing' );
-	}, [] );
-
 	/**
 	 * `start` event listener for the media recorder instance.
 	 */
@@ -258,7 +268,6 @@ export default function useMediaRecording( {
 	 * @returns {void}
 	 */
 	function onStopListener(): void {
-		setState( 'processing' );
 		const lastBlob = getBlob();
 		onDone?.( lastBlob );
 
@@ -310,11 +319,22 @@ export default function useMediaRecording( {
 		}
 	}
 
+	/**
+	 * Close the audio stream
+	 */
+	function closeStream() {
+		if ( audioStream.current ) {
+			const tracks = audioStream.current.getTracks();
+			tracks.forEach( track => track.stop() );
+		}
+	}
+
 	// Remove listeners and clear the recorded chunks
 	useEffect( () => {
 		reset();
 
 		return () => {
+			closeStream();
 			clearListeners();
 		};
 	}, [] );
@@ -326,7 +346,6 @@ export default function useMediaRecording( {
 		duration,
 		analyser: analyser.current,
 		onError,
-		onProcessing,
 
 		controls: {
 			start,

package/src/index.ts

@@ -13,6 +13,7 @@ export { default as useAiSuggestions } from './hooks/use-ai-suggestions/index.js
 export { default as useMediaRecording } from './hooks/use-media-recording/index.js';
 export { default as useAudioTranscription } from './hooks/use-audio-transcription/index.js';
 export { default as useTranscriptionPostProcessing } from './hooks/use-transcription-post-processing/index.js';
+export { default as useAudioValidation } from './hooks/use-audio-validation/index.js';
 
 /*
  * Components: Icons

package/src/types.ts

@@ -46,6 +46,11 @@ export type {
 	UseTranscriptionPostProcessingReturn,
 	PostProcessingAction,
 } from './hooks/use-transcription-post-processing/index.js';
+export type {
+	UseAudioValidationReturn,
+	ValidatedAudioInformation,
+} from './hooks/use-audio-validation/index.js';
+
 /*
  * Hook constants
  */
@@ -88,19 +93,7 @@ export type { RecordingState } from './hooks/use-media-recording/index.js';
  */
 export type CancelablePromise< T = void > = Promise< T > & { canceled?: boolean };
 
-// Connection initial state
-// @todo: it should be provided by the connection package
-interface JPConnectionInitialState {
-	apiNonce: string;
-	siteSuffix: string;
-	connectionStatus: {
-		isActive: boolean;
-	};
-}
-
-// Global
-declare global {
-	interface Window {
-		JP_CONNECTION_INITIAL_STATE: JPConnectionInitialState;
-	}
-}
+/*
+ * Transcription types
+ */
+export type TranscriptionState = RecordingState | 'validating' | 'processing' | 'error';